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
408 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

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
...