It returns all the sibling elements of the element that you have selected.
It allows you to go through the siblings of the matched elements in the DOM tree and creates a new jQuery object from the matching elements.
Lets see how it works:
HTML:
<div style="width:450px;" class="parentSibling">
<ul>sibling Parent
<li>sibling previous</li>
<li>sibling previous</li>
<li class="sibling">li (sibling)</li>
<li>sibling next</li>
<li>sibling next</li>
</ul>
</div>
JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
$(document).ready(function(){
$("li.sibling").siblings().css({"color": "blue", "border": "2px solid blue"});
});
CSS:
.parentSibling * {
display: block;
border: 2px solid #333;
color: #fff;
padding: 5px;
margin: 15px;
background: lightblue;
}
You can also download the demo attached.
0 Comment(s)