博客

当我们使用 jQuery 选择元素时，经常需要使用链式调用。有时，我们需要在一个元素的父元素中查找另一个元素，然后再回到原始元素。这时可以使用 jQuery 的 andSelf() 方法。

andSelf() 方法主要用于连接前面选择的元素与加入集合的元素。例如，如果我们使用以下代码选择一个元素：

$('p').find('em');

如果我们想同时选择 p 和 em 元素，可以使用 andSelf()。

示例1

<p>
  Hello <em>world!</em>
</p>

// 首先选择 <em> 元素
$('em')
  // 选择其父元素 <p>
  .parent()
  // 再一起选中 <em> 和 <p> 元素
  .andSelf()
  // 添加类 "highlight"
  .addClass('highlight');

在这个例子中，我们首先选择 em 元素，然后调用 parent() 方法选择其父元素 p。最后，我们使用 andSelf() 一起选择 em 和 p 元素，再添加类highlight，最终效果是使得<em> 和 <p> 元素都被突出显示。

示例2

<div class="container">
  <p class="lead">This is a lead paragraph.</p>
  <p>This is another paragraph.</p>
  <p>This is yet another paragraph.</p>
</div>

// 选择第二个 <p> 元素
$('.container p:eq(1)')
  // 选择其上一个同级 sibling 元素
  .prev()
  // 选中两个元素同时加特定类
  .andSelf()
  .addClass('highlight');

在这个例子中，我们首先使用 :eq(1) 选择第二个 p 元素。然后，我们使用 prev() 方法选择其前一个同级兄弟元素。最后，使用 andSelf() 方法选中两个元素（第一个 p 元素和前一个同级元素）并添加类 highlight。

andSelf() 方法还有其他用途，例如为了能够进行连续调用和以前版本的兼容性，我们可以使用 addBack() 方法，效果类似于 andSelf()。

希望这个攻略能够帮助大家理解 jQuery andSelf() 方法的使用，谢谢。