jQuery parent()、parents() 和最接近() 函数之间的区别答案

【问题标题】：Difference between jQuery parent(), parents() and closest() functionsjQuery parent()、parents() 和最接近() 函数之间的区别
【发布时间】：2012-02-29 21:09:49
【问题描述】：

我使用 jQuery 已经有一段时间了。我想使用parent() 选择器。我还想出了closest() 选择器。找不到它们之间的任何区别。有没有？如果是，是什么？

parent()、parents() 和 closest() 有什么区别？

【问题讨论】：

parent::::travels 1 step back to parent....::::parents::: 给出所有父母的列表....::::closest::: travels通过兄弟姐妹返回，直到找到条件并仅返回第一个。所有这些都可以通过额外的选择器进行修改

标签： jquery

【解决方案1】：

来自http://api.jquery.com/closest/

.parents() 和 .closest() 方法的相似之处在于它们都遍历 DOM 树。两者的区别，虽然微妙的，重要的：

.closest()

从当前元素开始

向上遍历 DOM 树，直到找到与提供的匹配项选择器

返回的 jQuery 对象包含零个或一个元素

.parents()

从父元素开始

向上遍历 DOM 树到文档的根元素，添加每个一个临时集合的祖先元素；然后它过滤如果提供了选择器，则基于选择器的集合

返回的 jQuery 对象包含零个、一个或多个元素

.parent()

给定一个表示一组 DOM 元素的 jQuery 对象， .parent() 方法允许我们搜索这些的父母 DOM 树中的元素并从匹配元素。

注意： .parents() 和 .parent() 方法类似，不同之处在于后者仅在 DOM 树上向上移动一层。还， $("html").parent() 方法返回一个包含文档的集合，而 $("html").parents() 返回一个空集。

以下是相关主题：

【讨论】：

他实际上问的是 parent()，而不是 parents()。
@ScubaSteve：请用Note再次检查答案。
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.
@ScubaSteve，是的，但是 parents() 的问题更有趣。

【解决方案2】：

closest() 选择匹配选择器的第一个元素，向上来自 DOM 树。从当前元素开始并向上移动。

parent() 在 DOM 树上选择一个元素（向上一层）。

parents() 方法与parent() 类似，但选择所有在 DOM 树上匹配元素。从父元素开始并向上传播。

【讨论】：

【解决方案3】：

两者之间的差异虽然微妙，但很重要：

.closest()

从当前元素开始

向上遍历 DOM 树，直到找到与提供的选择器匹配的匹配项

返回的 jQuery 对象包含零个或一个元素

.parents()

从父元素开始

向上遍历 DOM 树到文档的根元素，将每个祖先元素添加到临时集合中；然后，如果提供了选择器，它会根据选择器过滤该集合

返回的 jQuery 对象包含零个、一个或多个元素

来自 jQuery docs

【讨论】：

我认为你在这里描述 .parents()

【解决方案4】：

$(this).closest('div') 和 $(this).parents('div').eq(0) 之间存在差异

基本上closest从当前元素开始匹配元素，而parents从父元素开始匹配元素（比当前元素高一级）

见http://jsfiddle.net/imrankabir/c1jhocre/1/

【讨论】：

【解决方案5】：

parent() 方法返回所选元素的直接父元素。此方法仅遍历 DOM 树的单层。

parents() 方法允许我们在 DOM 树中搜索这些元素的祖先。从给定的选择器开始向上移动。

The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.

[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

According to docs:

**closest()** method is similar to **parents()**, in that they both traverse up the DOM tree. The differences are as follows:

**closest()**

Begins with the current element
Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
The returned jQuery object contains zero or one element

**parents()**

Begins with the parent element
Travels up the DOM tree and returns all ancestors that matches the passed expression
The returned jQuery object contains zero or more than one element

【讨论】：

【解决方案6】：

$(this).closest('div') 与$(this).parents('div').eq(0) 相同。

【讨论】：

不完全是，如果 $(this) 也是一个 div。