JQuery .nextAll()
https://www.jquery123.com/nextAll/
获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
如果一个jQuery对象代表了一组DOM元素,.nextAll()
方法允许我们在DOM树上遍历所有元素的后继元素,并且构建一个新的匹配元素的jQuery对象。
该方法还可以接受一个可选的选择器表达式,该选择器表达式可以是任何可传给 $()
函数的选择器表达式。如果供应选择器参数,那么会先测试该元素是否满足匹配的选择器表达式。
考虑一个页面上一个简单的列表:
1
2
3
4
5
6
7
|
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> |
如果我们从第三个项目开始,我们可以找到它之后的元素:
1
|
$('li.third-item').nextAll().css('background-color', 'red'); |
执行后的结果是列表项4和5变成红色背景。 由于我们没有提供一个选择器表达式,因此这两个元素很明确的成为了结果对象中的一部分。如果我们有提供一个选择的表达式,那么在包含在结果对象之前,会先测试该元素是否满足匹配的选择器表达式。
例子:
Example: 查找第一个 div 后面的所有 div,并为它们添加样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html> <html> <head> <style> div { width: 80px; height: 80px; background: #abc; border: 2px solid black; margin: 10px; float: left; } div.after { border-color: red; } </style> <script src="https://code.jquery.com/jquery-latest.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:
Example: 查找 body 中第二个孩子元素后面的所有段落,并为它们添加样式。
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
|
<!DOCTYPE html> <html> <head> <style> div, p { width: 60px; height: 60px; background: #abc; border: 2px solid black; margin: 10px; float: left; } .after { border-color: red; } </style> <script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>p</p> <div>div</div> <p>p</p> <p>p</p> <div>div</div> <p>p</p> <div>div</div> <script> $(":nth-child(1)").nextAll("p").addClass("after"); </script> </body> </html> |
Demo: