Como filtrar elementos html no jQuery

JQuery é uma biblioteca JavaScript com sintaxe mais fácil de aprender. Como seu idioma parental JS, o jQuery também pode ser integrado ao HTML para executar várias operações. O jQuery fornece o suporte para filtrar os elementos HTML usando vários métodos que incluem os métodos First (), Last (), Eq (), Slice (), Filter (), Has () e Not (). Este guia fornece objetivos para filtrar elementos HTML no jQuery e os seguintes resultados de aprendizado.

• Trabalho de todos os métodos para filtrar elementos HTML no jQuery
• Uso de cada método (com exemplos)

Como filtrar elementos html no jQuery

Esta seção pede o funcionamento de vários métodos para filtrar elementos html no jQuery.

Como usar o primeiro () método

O primeiro () método filtra os elementos com base em alguma condição e retorna o primeiro elemento dos elementos correspondentes. A sintaxe do método First () é exibida abaixo:

$ ("seletor").primeiro();

Exemplo

No código acima,

• primeiro () o método é aplicado no seletor = ”p““
• O método addclass () é aplicado para diferenciar o elemento filtrado

Saída

A saída mostra que apenas o primeiro parágrafo é selecionado e seu plano de fundo é alterado usando o “primeiro" aula.

Como usar o método Último ()

Este método retorna o último elemento do conjunto de elementos correspondentes. Funciona na seguinte sintaxe:

$ ("seletor").durar();

Exemplo

O código acima pratica o método Último () no elemento de parágrafo e um jQuery addclass () o método é adicionado para incorporar uma classe CSS.

Observação: O objetivo da classe CSS é destacar o elemento correspondente.

Saída

Como usar o método eq ()

O método eq () retorna o elemento que corresponde ao número de índice do elemento. Este método usa a seguinte sintaxe

$ ("seletor").eq ();

O método eq () aceita valores numéricos positivos ou negativos. O valor positivo começa.

Exemplo

O exemplo a seguir pratica o método eq () em índices positivos e negativos.

O código é descrito abaixo,

• o Eq (3) está usando o número do índice positivo e a classe CSS = ”positivo”Está associado ao método da eq (3).
• o Eq (-3) usa o número do índice negativo e a classe CSS = ”negativo”É exercido quando a eq (-3) é executada.

Saída

Da saída acima, o Eq (3) busca o último parágrafo (como está em índice = 3) e o Eq (-3) filtros O terceiro elemento da parte inferior (zero é reservado para o primeiro elemento e -1 é para o último elemento).

Como usar o método slice ()

O método da fatia retorna o intervalo específico (definido por índices) de elementos. Para usar o método slice (), a seguinte sintaxe é praticada:

$ ("seletor").fatiar (começar, parar);

O método Slice () aceita valor numérico positivo ou negativo como seus critérios de início/parada

• começar: O início do corte é determinado por este parâmetro
• Stop (Opcional): Este parâmetro interrompe o fatiamento antes que o número do índice especificado seja atingido
• Número do índice positivo: A indexação positiva inicia a seleção de elementos da ordem de primeira ordem.
• Número do índice negativo: O número do índice negativo começa a selecionar os elemetns da ordem inferior.

Exemplo 1: Usando o número do índice positivo

O código acima é descrito como,

• o "p”Representa os parágrafos usados ​​para o“fatiar()”Método
• o "fatia (0,2)”Mostra que o fatiamento começará a partir do 0º índice e pare antes do 2º índice
• o addclass (“positivo“) Método adicionará o“positivo”Classe em elementos selecionados.

Saída

Exemplo 2: Usando o número do índice negativo

O código a seguir pratica o número do índice negativo no método slice ()

• o fatia (-2, -1) é aplicado a parágrafos e começaria a partir do segundo elemento e termina antes do último elemento.
• o addclass (“negativo“) Adicionando“negativo”Classe para os elementos fatiados.

Saída

Como usar o método filtro ()

O método filtro () retorna os elementos que correspondem a um critério específico. A sintaxe deste método é fornecida abaixo:

$ ("seletor").filtro (critério, função (índice));

O critério O parâmetro está definido para selecionar elementos e o Parâmetro da função (índice) é opcional (exercitado quando um elemento específico deve ser buscado na seleção usando o índice).

Exemplo

O código a seguir pratica o método filtro () para recuperar dois parágrafos usando seus nomes de identificação e classe.

O código acima seleciona apenas os parágrafos que têm classificação = ”P1”E id =”P2““.

Saída

Como usar o método não ()

O método não () resultaria em elementos de retorno que não estão dentro dos critérios correspondentes. Ou pode -se dizer que é o oposto do Método Filter (). A sintaxe de Not () é dada abaixo:

$ ("seletor").não (critérios, função (índice));

Exemplo

No código acima,

• duas aulas "P1" e "P2”São passados ​​para o método não ()
• o addclass ("não") é usado para colorir a seleção feita por não() método

Saída

Como usar o método ()

O método has () é praticado para obter o elemento que tem elementos de ramificação. A sintaxe deste método é fornecida abaixo:

$ ("seletor").tem ("elemento");

Na sintaxe acima, a ““Seletor"Que contém o"elemento”Seria recuperado apenas.

Exemplo

Para uma melhor compreensão do método has (), o seguinte código é executado.

O código acima traça que “div”Tag que tem a“parágrafo" elemento. Além disso, o CSS Class = ”tem”É usado para mostrar o selecionado“div" marcação.

Saída

A saída acima mostra que o div contendo parágrafos é apenas selecionado e que div é colorido com a cor verde da floresta.

Conclusão

O jQuery suporta vários métodos como FILT (), Last (), Eq (), Not (), Has (), Slice () etc., Para filtrar elementos HTML. Este guia fornece o trabalho e o uso de cada método um por um. Cada método segue a filtragem diferente para selecionar alguns elementos. Por exemplo, os métodos eq () e slice () usam números de índice, enquanto outros métodos usam a classe ou id (de um elemento) para filtrar elementos html.