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

Question

我正在做一些基础的jQuery操作，实际上是入门级别的，经常需要通过类似以下方式向上遍历dom：

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

我在想，有没有更好的方法来做这件事情？

- Cordial

Answer 1

你可以使用返回所有祖先元素的parents方法。如果你想在特定级别停止遍历，请使用eq过滤结果集。例如，要获取祖父元素：

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

如果您想通过树向上移动并在特定选择器匹配时停止，可以使用closest，例如：

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

- Jon

Answer 2

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

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

- Igor Dymov

Answer 3

假设你有以下的HTML代码：

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

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

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

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

- Bojangles

Answer 4

听起来你需要使用.parents()或者.closest() -- 后者是最有效的，因为它在匹配到最近的选择器后停止向上遍历DOM。

- Gary Green

Answer 5

"我在想有没有更好的方法来做这个呢？"

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

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

1. 您的“数据模型”实际上包含在DOM中
2. 维护和更改此类应用程序非常痛苦

…那么现在可能是考虑采用正式的model-view 方法的时候了。

- Geoff Moller