Get all elements with class names "first", "second" and "third", that are previous siblings between h2 and h5 - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:prevUntil

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. prevUntil

Description

Get all elements with class names "first", "second" and "third", that are previous siblings between h2 and h5

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {//www  . j  a  v a2  s .co  m
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("h2").prevUntil("h5", ".first, .second, .third").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <div>parent
    <h5>h5</h5>
    <h3 class="third">h3 class "third"</h3>
    <span>span</span>
    <span class="second">span also class "second"</span>
    <span class="second">span class "second"</span>
    <p>p</p>
    <p class="first">p class "first"</p>
    <p>p</p>
    <h3>h3</h3>
    <h2>h2</h2>
    <span>span</span>
    <p>p</p>
    <h3 class="third">h3 class "third"</h3>
    <span>span</span>
    <span class="second">span also class "second"</span>
    <span class="second">span class "second"</span>
    <p>p</p>
    <p class="first">p class "first"</p>
    <p>p</p>
    <h3>h3</h3>
    <h2>h2</h2>
    <span>span</span>
    <p>p</p>
  </div>
</div>

</body>
</html>

Related Tutorials