jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

jQuery 遍历- 关于 closest() 的方法介绍以及与 parents() 的方法区别分析

closest() 方法介绍

closest() 方法是 jQuery 遍历方法之一，它能够查找匹配选择器的第一个祖先元素。具体使用方法是：$(selector).closest(filter)，其中 selector 表示需要查找的元素选择器，filter 表示可选的过滤器。

这个方法在 jQuery 中十分常用，它常用于寻找某个元素最近的特定类型祖先元素，比如查找最近的表单元素进行表单操作。closest() 方法可以筛选出匹配 selector 的第一个祖先元素，如果带有 filter 参数，还可以进一步筛选出符合条件的元素。

下面是一个示例，假设有一个 HTML 页面，里面有一些嵌套的元素，并且有一个类名叫做 highlight 的元素，我们要找到它的最近的 ul 祖先元素：

<div>
  <ul>
    <li>item one</li>
    <li class="highlight">item two</li>
  </ul>
  <p>paragraph</p>
</div>

$('.highlight').closest('ul');

上述代码会返回匹配的 ul 元素，即：

<ul>
  <li>item one</li>
  <li class="highlight">item two</li>
</ul>

closest() 方法与 parents() 方法的区别分析

closest() 方法和 parents() 方法有一些相似之处，但是它们之间还是存在一些细微的区别。

• closest() 方法是从当前元素开始遍历 DOM 树，向上查找最近的匹配元素，与之相对的是 find() 方法，它是从当前元素开始遍历 DOM 树，向下查找符合条件的元素；
• parents() 方法会查找所有符合选择器条件的祖先元素，而 closest() 方法则只返回一组最佳匹配元素；
• parents() 方法不支持过滤器参数，只能查找所有符合条件的祖先元素。

下面是一个示例，展示了 closest() 方法和 parents() 方法的区别：

<div>
  <ul>
    <li>item one</li>
    <li>
      <a href="#">link</a>
      <p class="highlight">paragraph</p>
    </li>
  </ul>
  <p>paragraph</p>
</div>

$('.highlight').closest('div').css('background', 'yellow');
$('.highlight').parents('div').css('border', '1px solid red');
````

上述代码会将最近的 `div` 元素的背景色改为黄色，将所有符合条件的祖先元素的边框宽度改为 1 像素，即：

```css
div {
  background: yellow;
  border: 1px solid red;
}

通过这个示例，我们可以看到 closest() 方法只返回了一个最佳匹配元素，而 parents() 方法返回了所有符合条件的祖先元素。

示例与练习

在实际开发中，closest() 方法与 parents() 方法的区别非常明显，我们需要根据实际情况选择合适的方法。下面是一个示例和一个练习，帮助大家更好的掌握这两个方法。

示例

假设有一个 HTML 页面，里面有一个菜单和一个主容器，当菜单项被点击时，需要根据菜单项关联的容器，显示对应的内容。可以使用 closest() 方法和 data-* 属性，来实现这个功能：

<div id="container">Container</div>
<ul id="menu">
  <li data-target="#container">Menu 1</li>
  <li data-target="#another-container">Menu 2</li>
</ul>
<div id="another-container">Another Container</div>

$('#menu li').click(function() {
  var target = $(this).data('target');
  $(target).closest('div').show().siblings().hide();
});

上述代码会监听菜单项的点击事件，根据 data-target 属性的值，查找最近的 div 祖先元素，显示对应的内容。这个示例中，当菜单项 1 被点击时，#container 容器会被显示，菜单项 2 被点击时，#another-container 容器会被显示。

练习

使用 parents() 方法，修改示例中的代码，让它能够显示相关菜单项所有祖先元素的内容。提示：你需要使用一个双重循环，遍历每一个菜单项，查找符合条件的祖先元素并显示它们。

$('#menu li').click(function() {
  var target = $(this).data('target');
  // TODO: 使用 parents() 方法查找所有符合条件的祖先元素，并显示它们
});