Hereafter, you guys are no need to worry about how to get all siblings element until the matching is found. In jQuery, nextUntil() method is used to get all siblings elements following an element until you reach an element with a specific selector. Additionally, you may filter sibling elements by a selector.

First, Syntax of nextuntil()

$(selector).nextUntil(stop,filter)

Both the parameters stop and filter are optional one. If you need to return many siblings, you can separate each expression with a comma (,).

Here, the sibling elements are elements, which share the same parent. This nextuntil() will returns all the next sibling elements between the selector and stop.

Try this Example for .nextuntil()

<script>
$(document).ready(function(){
  $("li.start").nextUntil("li.stop", ".first").css({"color": "black", "border": "2px solid green"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
  <ul>ul (parent) 
    <li>This is</li>
    <li>This is a sample</li>
    <li class="start">li (sibling with class name "start")</li>
    <li class="first">li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li class="1">li (the next sibling of li with class name "start")</li>
    <li class="stop">li (sibling with class name "stop")</li>
  </ul>  
</div>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *