top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to find all sibling elements after the current element using jQuery?

0 votes
523 views
How to find all sibling elements after the current element using jQuery?
posted Jul 15, 2017 by Anand Huded

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

The .nextAll() method finds all sibling elements after the current element and construct a new jQuery object from the matching elements. The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Example

<head>
<style>
.siblings * { 
    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").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>

Preview

enter image description here

answer Jul 18, 2017 by Sumana
...