jquery中的end怎么用

在jQuery中，.end() 方法是一个内置函数，它允许你在当前链式调用中返回到最近的 .find() 或 .filter() 方法之前的集合，这意味着，如果你在一个元素集合上执行多个操作，并在某个点上使用了 .find() 或 .filter() 来缩小选择范围，.end() 可以用来返回到这些方法之前的状态。

使用 .end() 的一个典型场景是当你需要对一个元素集合进行一系列操作，但在中间的某个步骤中需要对子元素进行特殊处理，然后继续对原始集合进行其他操作。

下面通过一些示例来详细说明 .end() 的用法：

1. 基本用法

假设你有一个包含多个列表项 (<li>) 的无序列表 (<ul>)，你想选中所有的列表项，然后对其中的某些特定列表项应用不同的样式。

<ul>
  <li class="item">Item 1</li>
  <li class="item special">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item special">Item 4</li>
</ul>

你可以使用 .end() 来实现这个需求：

$('li.item').css('color', 'blue'); // 将所有 li.item 的文字颜色设置为蓝色
$('li.special').css('fontweight', 'bold').end().css('color', 'red'); // 将 li.special 的文字颜色设置为红色，并将字体加粗

在上面的例子中，.end() 用来返回到 $('li.item') 这个集合，然后对其应用 .css('color', 'red') 操作。

2. 与 .find() 结合使用

假设你有一段嵌套的元素结构，你想对外部元素和内部元素分别进行操作。

<div class="container">
  <p>This is a paragraph.</p>
  <div class="inner">
    <p>This is an inner paragraph.</p>
  </div>
</div>

你可以这样使用 .end()：

$('.container').css('border', '1px solid black'). // 为 .container 添加边框
  .find('.inner').css('background', 'lightgray').end() // 为 .inner 添加背景色，然后返回到 .container
  .find('p').css('color', 'green'); // 为所有的 p 标签设置文字颜色为绿色

在这个例子中，.end() 用来从 .find('.inner') 返回到 .container 集合，然后继续查找 <p> 元素并设置样式。

3. 与 .filter() 结合使用

如果你想基于某些条件过滤元素集合，并在过滤后的结果上执行操作，然后再返回到原始集合进行其他操作，可以使用 .end()。

<ul>
  <li class="old">Old Item</li>
  <li class="new">New Item</li>
  <li class="old">Another Old Item</li>
</ul>

$('li').filter(function() {
  return $(this).hasClass('old'); // 过滤出具有 .old 类的 li 元素
}).css('textdecoration', 'linethrough').end() // 为这些 li 元素添加删除线
.not('.old').css('color', 'red'); // 为不是 .old 类的 li 元素设置文字颜色为红色

在这个例子中，.end() 用来从过滤出的 .old 类元素返回到原始的 $('li') 集合，然后使用 .not('.old') 选择剩余的 .new 类元素并设置样式。

上文归纳

.end() 方法是jQuery中一个非常有用的工具，它允许你在复杂的DOM操作中灵活地控制选择器的范围，通过与 .find()、.filter() 等方法结合使用，你可以创建出强大的动态效果和交互，记得在使用 .end() 时，要清楚地理解当前的选择器上下文，以确保你的代码按预期工作。