Given a jQuery object that represents a set of DOM elements, the .nextAll() method allows us to search through the successors of these elements in the DOM tree 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.

Consider a page with a simple list on it:

1

2

3

4

5

6

7

<ul>

<li>list item 1</li>

<li>list item 2</li>

<liclass="third-item">list item 3</li>

<li>list item 4</li>

<li>list item 5</li>

</ul>

If we begin at the third item, we can find the elements which come after it:

1

$( "li.third-item" ).nextAll().css( "background-color", "red" );

The result of this call is a red background behind items 4 and 5. Since we do not supply a selector expression, these following elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.

Examples:

Locate all the divs after the first and give them a class.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!doctype html>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>nextAll demo</title>

<style>

div{

width:80px;

height:80px;

background:#abc;

border:2px solid black;

margin:10px;

float: left;

}

div.after{

border-color: red;

}

</style>

<scriptsrc="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<div>first</div>

<div>sibling<div>child</div></div>

<div>sibling</div>

<div>sibling</div>

<script>

$( "div:first" ).nextAll().addClass( "after" );

</script>

</body>

</html>

Demo:

Locate all the paragraphs after the second child in the body and give them a class.