jQuery parent（），parents（）和closest（）函数之间的区别

184

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

之间有什么区别parent()，parents()和closest()？

jquery

— 沙吉古隆
source

6

parent ::::旅行返回父级的第一步。...::::: parents :::给出所有父级的列表.... ::::: closest :::遍历兄弟姐妹直到找到条件并只返回第一个。所有这些都可以使用其他选择器进行修改

— Muhammad Umer

177

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

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

parents()方法类似于，parent()但会选择DOM树中的所有匹配元素。从父元素开始并向上移动。

— 苏巴什
source

10

是不是.parents()（而不是.parent()）检索所有元素？

— acdcjunior 2014年

65

该答案缺少一个要点：“最接近”从当前元素开始并向上移动，而“父母”从父元素开始并向上移动。

— 2015年

194

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

的。家长（）和.closest（）方法是类似的，它们都向上遍历DOM树。两者之间的差异虽然微妙，但意义重大：

.closest（）

从当前元素开始

向上移动DOM树，直到找到与提供的选择器匹配的对象

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

。父母（）

从父元素开始

在DOM树中浏览到文档的根元素，将每个祖先元素添加到一个临时集合中；然后，如果有选择器，则根据选择器过滤该集合

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

.parent（）

给定一个表示一组DOM元素的jQuery对象，.parent（）方法使我们可以在DOM树中搜索这些元素的父级，并从匹配的元素构造一个新的jQuery对象。

注意： .parents（）和.parent（）方法类似，不同之处在于后者仅在DOM树上移动单个级别。同样，$（“ html”）。parent（）方法返回一个包含文档的集合，而$（“ html”）。parents（）返回一个空集合。

这里是相关的线程：

— 幼稚的
source

8

他实际上询问的是parent（），而不是parent（）。

— ScubaSteve

2

@ScubaSteve：请使用再次检查答案Note。

— 2014年

1

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.

— 2014年

1

@ScubaSteve，是的，但是parents（）问题更有趣。

— Paul Draper 2014年

15

两者之间的差异虽然细微，但意义重大：

.closest（）

从当前元素开始

向上移动DOM树，直到找到与提供的选择器匹配的对象

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

。父母（）

从父元素开始

在DOM树中浏览到文档的根元素，将每个祖先元素添加到一个临时集合中；然后，如果有选择器，则根据选择器过滤该集合

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

从jQuery 文档

— 安泰拉特
source

13

我认为您在这里描述的.parents（）

— 穆罕默德·乌默尔

1

同时存在的差异$(this).closest('div')和$(this).parents('div').eq(0)

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

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

— 伊姆兰·卡比尔
source

-1

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

— uk
source

8

如果$（this）也是一个div，则不完全是。

— 2014年