jQuery 遍历 - 后代

使用jQuery，我们可以轻松地遍历DOM树以查找元素的后代。

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

在本章中，我们将解释如何遍历DOM树。

遍历DOM树

我们有以下jQuery方法，用于遍历DOM树：

• children()

• find()

下面将向您展示如何使用每种方法。

jQuery children()方法

jQuery children()方法返回所选元素的所有直接子级。

此方法仅在DOM树下遍历单个级别。

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

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

您还可以使用可选参数来过滤搜索子项。

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

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

Método find() de jQuery

jQuery find()El método devuelve todos los elementos descendientes que coinciden con los parámetros especificados.

Este método realiza una búsqueda descendente a lo largo de los elementos descendientes del elemento DOM, hasta el último descendiente.

Comienza desde todos los párrafos y busca elementos descendientes span, como $("p span"):

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

Para devolver múltiples descendientes, separe los nombres de los selectores con comas.

El siguiente ejemplo devuelve todos los elementos <span> y <i> que son descendientes de un elemento <p>:

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

Referencia de búsqueda de jQuery

Para obtener una referencia completa de los métodos de búsqueda, visite nuestraReferencia de búsqueda de jQuery.