jQuery 遍历 - andSelf() 方法 概述
jQuery 2022-06-01 17:58:39小码哥的IT人生shichen
jQuery 遍历 - andSelf() 方法
实例
找到所有 div，以及其中的所有段落，并为它们添加两个类名。请注意，由于未使用 .andSelf()，div 没有黄色背景色。
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
add() 方法把堆栈中之前的元素集添加到当前集合。
语法
.andSelf()
详细说明
请思考这个拥有简单列表的页面：
<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>
以下代码的结果是项目 3,4,5 拥有红色背景：
$("li.third-item").nextAll().andSelf()
.css("background-color", "red");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
</style>
</head>
<body>
<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>
<script>
$("li.third-item").nextAll().andSelf().css("background-color", "red");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
首先，初始的选择器会定位项目 3，初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后，调用 .andSelf() 会合并这两个集合，所创建的 jQuery 对象指向按照文档顺序的所有三个项目：{[<li.third-item>,<li>,<li> ]}。
