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的選擇和遍歷方法絕對是一個好主意。

但是，如果將來你發現自己被遍歷所淹沒並發現：

......可能是時候考慮一種正式的模型 - 視圖方法了。