jQuery中find()和closest()的区别

在进行 jQuery DOM 操作时，常常需要查找和选取特定的元素，以进行进一步的操作。jQuery 提供了一系列的函数来帮助我们完成此类操作，其中包括 find() 和 closest() 两个函数。这两个函数的作用类似，但也存在一些区别。

find()

find() 函数用于查找某个元素下的所有子孙元素。其语法如下：

$(selector).find(subselector)

其中，selector 为被选取的元素，subselector 为需要查找的子孙元素的选择器。

下面是一个例子：

<div class="parent">
  <div class="child">
    <span class="grandchild"></span>
  </div>
</div>

// 找到所有子孙元素
$('.parent').find('*'); // 返回包含 span.grandchild 元素的 jQuery 对象

在上面的例子中，$('.parent').find('*') 返回的是包含 span.grandchild 元素的 jQuery 对象。这是因为 * 符号表示选取所有类型的子孙元素。

closest()

closest() 函数用于查找某个元素的最近的祖先元素，可以是自身或者父元素。其语法如下：

$(selector).closest(filter)

其中，selector 为被选取的元素，filter 为要查找的祖先元素的选择器。如果 filter 参数为空，closest() 返回的是离当前元素最近的祖先元素。如果指定了 filter 参数，则返回离当前元素最近的符合 filter 选择器的祖先元素。

下面是一个例子：

<div class="parent">
  <div class="child">
    <span class="grandchild"></span>
  </div>
</div>

// 找到最近的有 class 名称为 parent 的祖先元素
$('.grandchild').closest('.parent'); // 返回包含 div.parent 元素的 jQuery 对象

在上面的例子中，$('.grandchild').closest('.parent') 返回的是包含 div.parent 元素的 jQuery 对象。

区别

find() 和 closest() 两个函数的区别在于它们的查找方向不同。

find() 函数从当前元素向下查找子孙元素，直到找到符合条件的元素，然后将符合条件的元素加入到 jQuery 对象中返回。

closest() 函数从当前元素向上查找祖先元素，直到找到符合条件的元素，然后将符合条件的元素加入到 jQuery 对象中返回。如果符合条件的元素是当前元素本身，则返回当前元素。

需要注意的是，find() 函数在从当前元素向下查找元素时，并不是仅查找其直接子元素，而是查找所有的后代元素。如果仅需要查找直接子元素，可以使用 children() 函数。