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的选择和遍历方法绝对是一个好主意。

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

......可能是时候考虑一种正式的模型 - 视图方法了。