jQuery Navegação - Filtrar

Usando jQuery, podemos facilmente filtrar vários elementos de uma lista de elementos DOM.

Nesta seção, explicaremos como restringir a busca por elementos na árvore DOM.

Filtrar a árvore DOM

Temos os seguintes métodos jQuery, usados para selecionar elementos com base na posição específica de um elemento em um grupo de elementos:

• first()

• last()

• eq()

• filter()

• not()

• has()

• is()

A seguir, mostraremos como usar cada método.

Método jQuery first()

jQuery first()O método retorna o primeiro elemento selecionado.

O exemplo a seguir destaca o primeiro parágrafo:

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

Método jQuery last()

jQuery last()O método retorna o último elemento selecionado.

O exemplo a seguir destaca o último parágrafo:

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

Método jQuery eq()

jQuery eq()O método retorna o elemento com o índice específico do elemento selecionado.

O índice sempre começa em 0, portanto, o primeiro número terá índice 0 (não1):

O exemplo a seguir seleciona o terceiro parágrafo (índice2):

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

Método filter() do jQuery

jQuery filter()O método retorna elementos que correspondem a condições específicas.

Este método remove todos os elementos que não correspondem às condições selecionadas e retorna aqueles que coincidem.

O exemplo a seguir retorna todos os parágrafos com o nome de classe “demo”:

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

O exemplo a seguir retorna todos os itens de lista pares:

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

Método jQuery not()

jQuery not()O método retorna elementos que não correspondem a condições específicas.

Este método é o mesmofilter()O método é o contrário.

O exemplo a seguir retorna todos os parágrafos que não possuem o nome de classe “demo”:

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

Método has() do jQuery

jQuery has()Este método retorna todos os elementos que coincidem com o seletor especificado, contendo um ou mais elementos.

O exemplo a seguir retorna todos os parágrafos que contêm o elemento <span>:

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

Método is() do jQuery

jQuery is()Este método verifica se um dos elementos selecionados coincide com os parâmetros fornecidos.

Se pelo menos um desses elementos coincidir com os parâmetros fornecidos, este método retornará true, caso contrário, retornará false.

O exemplo a seguir verifica se o pai do <p> é o elemento <div>:

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

Referência de Navegação do jQuery

Para referência completa dos métodos de navegação, acesse nossoReferência de Navegação do jQuery.