jQuery prevUntil()

Introduction

Return all sibling elements between two <li> elements with class name "start" and "stop":

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {//from w w  w. java 2 s . c  om
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("li.start").prevUntil("li.stop")
     .css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li class="stop">li</li>
    <li>li (the previous sibling of li with class name "start")</li>
    <li>li (the previous sibling of li with class name "start")</li>
    <li>li (the previous sibling of li with class name "start")</li>
    <li class="start">li</li>
    <li>li</li>
    <li>li</li>
  </ul>
</div>

<p>In this example, we return all previous sibling elements between the li element with class name "start" and the li element with class name "stop".</p>

</body>
</html>

The prevUntil() method returns all previous sibling elements between the selector and stop.

Sibling elements are elements that share the same parent.

If both parameters are empty, this method will return all previous sibling elements.

$(selector).prevUntil(stop,filter)

Parameter	Optional	Description
stop	Optional.	A selector expression, element or jQuery object indicating where to stop the search
filter	Optional.	a selector expression to narrow down the search To return multiple siblings, separate each expression with a comma.

Previous Next