jQuery Tutorial Tutorials - jQuery next adjacent sibling selector

The next adjacent sibling selector (prev + next)selector selects all elements filtered by next and are immediately preceded by the element specified by prev.

jQuery next adjacent sibling selector Syntax

$('prev + next')

jQuery next adjacent sibling selector Examples

In following example,It would select element item3 and place a border around it.

example:Select elements using next adjacent sibling selector

<style>li{margin:10px}</style>
<ul id="navList">
    <li id="item1">item1</li>
    <li id="item2">item2</li>
    <li id="item3">item3</li>
    <li id="item4">item4</li>
</ul>
<script>
    $('#item2 + li').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