jQuery Tutorial Tutorials - jQuery next siblings selector

The next siblings selector (prev ~ siblings)selector selects all elements filtered by siblings and are followed after the element specified by prev.

jQuery next siblings selector Syntax

$('prev ~ siblings')

jQuery next siblings selector Examples

In following example,It would select elements item2,item4 and place a border around them.

example:Select elements using next siblings selector

<style>li{margin:10px}</style>
<ul id="navList">
    <li id="item1">item1</li>
    <li id="item2" class="hasborder">item2</li>
    <li id="item3">item3</li>
    <li id="item4" class="hasborder">item4</li>
</ul>
<script>
    $('#item1 ~ li.hasborder').css('border','2px solid coral');
</script>

Try it

sibling selector difference

next adjacent sibling selector (prev + next): only selects adjacent sibling element,it would match 0 or 1 element.
general next siblings selector (prev ~ siblings):
selects all siblings after prev elements.

<style>li{margin:10px}</style>
<ul id="navList">
   <li id="item1" class="coral">item1</li>
   <li id="item2">item2</li>
   <li id="item3">item3</li>
   <li id="item4" class="coral">item4</li>
</ul>
<script>
   console.log($('#item2 + .coral').length);// 0, item3 doesn't has class coral
   console.log($('#item2 ~ .coral').length);//1 , matched element: item4
   $('#item2 + .coral').css('border','2px solid coral');
   $('#item2 ~ .coral').css('border','2px solid coral');
</script>

Try it