jQuery - 是否有比“parent().parent().parent()”更好的语法？

Question

我正在做一些非常基本的 jQuery 东西，真正开始，并且我经常通过做一些事情来导航 dom，就像

$(this).parent().parent().addClass('hello');

我只是想知道是否有更好的方法来做到这一点？

Answer 1

您可以使用 parents ，它依次返回所有祖先元素。如果想在特定级别停止遍历，可以使用eq进行过滤由此产生的集合。例如，要获取祖父母：

// 0 = parent, 1 = parent of parent, etc.
$(this).parents().eq(1).addClass('hello');

如果您想向上遍历树并且不在特定级别停止，而是在特定选择器匹配处停止，请使用 最接近，例如：

$(this).closest("table").addClass('hello');

Answer 2

假设您有以下 HTML：

<div>
    <span>
        <strong>Hi there</strong>
    </span>
</div>

您可以只使用 .parents()获取 div 元素：

$("strong").parents("div").addClass("hello");

只需将 "strong" 替换为 this，您就可以使用选择器来查找特定的父元素。

Answer 3

您可以使用 closest() 方法，该方法返回第一个匹配的元素祖先链中给定的选择器。

$(this).closest(SELECTOR_OF_THE_PARENT).addClass('hello')

Answer 4

听起来像是您的 .parents() 或 .closest() 之后 - 后者是最有效的，因为一旦它匹配最接近的选择器，它就会停止在 DOM 上前进。

Answer 5

“我只是想知道是否有更好的方法来做到这一点？”

熟悉 jQuery 的选择和遍历方法绝对是个好主意。

然而，如果将来你发现自己被遍历淹没并发现：

1. 你的“数据模型”实际上包含在你的 DOM 中
2. 维护和更改这种性质的应用程序是非常痛苦的

......可能是时候考虑正式的 模型-查看方法。