返回值:jQueryandSelf()

将前一个元素集合插入到当前集合的栈顶。

正如在 .end() 中讨论过的，jQuery 对象会维护一个内部栈，用来持续跟踪匹配元素的变化。当调用了 DOM 遍历的方法，新的元素集合会被压入栈顶。如果同样需要之前的元素集合，那么 .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');

首先，初始选择器定位到第 3 项列表项，并使用该列表项初始化栈。然后调用 .nextAll() 后，第 4 和 第 5 项列表项被压入栈顶。最后，调用 .andSelf() 时，将这两个集合合并到一起，创建了一个 jQuery 对象，指向了这三个列表项，其顺序是按照这三个列表项在文档中的顺序，即：{[<li.third-item>,<li>,<li> ]}。

示例:

查找所有的 div，及包含在它们中间的段落，并且为它们添加样式。注意，div 并没有黄色的背景色，因为它并没有使用 .andSelf()。

<!DOCTYPE html>
<html>
<head>
<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
  </style>
<script src="jquery.min.js"></script>
</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>

演示: