jQuery 遍歷 - 后代

使用jQuery，我們可以輕松地遍歷DOM樹(shù)以查找元素的后代。

后代是孩子，孫子，曾孫等。

在本章中，我們將解釋如何遍歷DOM樹(shù)。

遍歷DOM樹(shù)

我們有以下jQuery方法，用于遍歷DOM樹(shù)：

• children()

• find()

下面將向您展示如何使用每種方法。

jQuery children()方法

jQuery children()方法返回所選元素的所有直接子級(jí)。

此方法僅在DOM樹(shù)下遍歷單個(gè)級(jí)別。

下面的示例返回DIV的直接子元素：

$(document).ready(function(){
  $("div").children().css("background-color", "coral");
});

您還可以使用可選參數(shù)來(lái)過(guò)濾搜索子項(xiàng)。

以下示例返回DIV的直接子代的所有<p>元素：

$(document).ready(function(){
  $("div").children("p").css("background-color", "coral");
});

jQuery find()方法

jQuery find()方法返回與指定參數(shù)匹配的所有后代元素。

此方法沿DOM元素的后代向下遍歷，一直向下到最后一個(gè)后代。

從所有段落開(kāi)始，并搜索后代span元素，與$("p span")：

$(document).ready(function(){
  $("p").find("span").css("background", "mediumpurple");
});

要返回多個(gè)后代，請(qǐng)用逗號(hào)分隔選擇器名稱(chēng)。

以下示例返回作為<p>元素后代的所有<span>和<i>元素：

$(document).ready(function(){
  $("p").find("span, i").css("background", "mediumpurple");
});

jQuery遍歷參考

有關(guān)完整的遍歷方法參考，請(qǐng)?jiān)L問(wèn)我們的jQuery遍歷參考。