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');

如果您想要向上穿过树而不是停留在特定级别，但是在特定选择器匹配时，请使用closest代替，例如：

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

Answer 2

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

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

Answer 3

假设您有以下HTML：

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

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

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

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

Answer 4

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

Answer 5

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

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

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

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

......可能是考虑正式model - view approach的时候了。