Select all next sibling via jQuery

Question

Aryan Kumar · Answer

Sure, here is how you can select all next siblings via jQuery:

Code snippet

// Select all `li` elements
var lis = $('li');

// Get all next siblings of each `li` element
var nexts = lis.nextAll();

The nextAll() method returns all following siblings of each element in the set of matched elements, optionally filtered by a selector. In this case, we are not filtering the results, so all next siblings will be returned.

The nexts variable will now contain a jQuery object that represents all of the next siblings of the li elements. You can then use this object to do whatever you need to do with the next siblings, such as:

Loop through the next siblings and print their text content:

Code snippet

nexts.each(function() {
  console.log($(this).text());
});

Change the background color of all next siblings to red:

Code snippet

nexts.css('background-color', 'red');

Hide all next siblings:

Code snippet

nexts.hide();

Do something else entirely!

forum

Select all next sibling via jQuery

Can you answer this question?

1 Answers