jQuery Búsqueda - Filtrar

Con jQuery, podemos filtrar fácilmente varios elementos de una lista de elementos DOM.

En este capítulo, explicaremos cómo reducir el rango de búsqueda de elementos en el árbol DOM.

Filtrar el árbol DOM

Tenemos los siguientes métodos jQuery, que se utilizan para seleccionar elementos según su posición en un grupo de elementos:

• first()

• last()

• eq()

• filter()

• not()

• has()

• is()

A continuación, le mostraremos cómo usar cada método.

Método jQuery first()

jQuery first()El método devuelve el primer elemento seleccionado.

El siguiente ejemplo resalta el primer párrafo:

$ (document).ready(function () {
　　$("p").first().css("background", "coral");
});

Método jQuery last()

jQuery last()El método devuelve el último elemento seleccionado.

El siguiente ejemplo resalta el último párrafo:

$ (document).ready(function () {
　　$("p").last().css("background", "coral");
});

Método jQuery eq()

jQuery eq()El método devuelve el elemento con el índice específico seleccionado.

El índice siempre comienza en 0, por lo que el primer número tendrá el índice 0 (no1):

El siguiente ejemplo selecciona el tercer párrafo (índice2):

$("button").click(function(){
　　$("p").eq(2).css("background-color", "red");
});

Método filter() de jQuery

jQuery filter()El método devuelve los elementos que coinciden con la condición específica.

Este método filtra todos los elementos que no cumplen con las condiciones seleccionadas y devuelve aquellos que coinciden.

El siguiente ejemplo devuelve todos los párrafos con el nombre de clase "demo":

$ (document).ready(function () {
　　$("p").filter(".demo").css("background", "coral");
});

El siguiente ejemplo devuelve todos los elementos de lista pares:

$ (document).ready(function () {
　　$("li").filter(":even").css("background", "coral");
});

Método jQuery not()

jQuery not()El método devuelve los elementos que no cumplen con condiciones específicas.

Este método es equivalente afilter()El método es inverso.

El siguiente ejemplo devuelve todos los párrafos que no tienen el nombre de clase "demo":

$ (document).ready(function () {
　　$("p").not(".demo").css("background", "coral");
});

Método has() de jQuery

jQuery has()El método devuelve todos los elementos que coinciden con el selector especificado, que contienen uno o más elementos.

El siguiente ejemplo devuelve todos los párrafos que contienen un elemento <span>:

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

Método is() de jQuery

jQuery is()El método verifica si uno de los elementos seleccionados coincide con el parámetro dado.

Si al menos uno de estos elementos coincide con el parámetro dado, este método devuelve true, de lo contrario devuelve false.

El siguiente ejemplo verifica si el padre de <p> es el elemento <div>:

$ (document).ready(function () {
　　$("p").parent().is("div");
});

Referencia de jQuery de exploración

Para obtener referencias completas de métodos de exploración, por favor visite nuestroReferencia de jQuery de exploración.