Introdução ao jQuery
3.6 Uso de filtros
<input type="text" id="cpf"/>
25 Seleciona elementos escondidos
No exemplo, buscamos apenas as inputs que estão ocultas:
$("input:hidden")
O retorno do seletor será:
<input type="hidden" id="user_id" value="1949"/>
3.6 Uso de filtros
Filtros atuam em conjunto com os seletores, possibilitando um ajuste ainda precisona definição de critérios para seleção de elementos. Filtros removem determinados elementos, mantendo apenas aqueles necessários.
A tabela a seguir lista alguns filtros e sua descrição:
FILTRO DESCRIÇÃO
:first Seleciona o primeiro elemento
:last Seleciona o último elemento
:even Seleciona apenas os elementos pares
:odd Seleciona apenas os elementos ímpares
:eq(n) Seleciona o enésimo elemento
:gt(n) Seleciona apenas os elementos cujo index é maior que
n
:lt(n) Seleciona apenas os elementos cujo index é menor que
n
:header Seleciona apenas elementos do tipo título (H1, H2,
etc.)
:animated Seleciona todos os elementos que possuem animação
:not(selector) Um filtro que nega a condição especificada e, portanto,
seleciona apenas os elementos que não condizem com o critério
A seguir veremos a aplicação de alguns deles. Para cada um dos exemplos abaixo considere o seguinte código HTML:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
</head>
<body>
<h4>Itens mais elogiados</h4>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ul>
<h4>Itens com mais reclamações</h4>
<ol>
<li>Item P</li>
<li>Item L</li>
<li>Item Q</li>
<li>Item W</li>
</ol>
</body>
</html>
Filtro eq(n)
Seleciona o elemento cujo índice é n, dentro de um conjunto de elementos. No exemplo abaixo, selecionamos o elemento <li> cujo índice é igual a 1:
<script>
$(document).ready(function(){
$("li:eq(1)").css("color","red");
});
</script>
O elemento selecionado será:
<li>Item B</li>
No jQuery e JavaScript o índice começa em 0. Portanto, a numeração do índice de cada elemento <li> seria:
<ul>
<li>Item A</li> <!-- INDICE 0 -->
<li>Item B</li> <!-- INDICE 1 -->
<li>Item C</li> <!-- INDICE 2 -->
<li>Item D</li> <!-- INDICE 3 -->
</ul>
O índice nada mais é do que a posição de determinado elemento dentro de um vetor de elementos. Como o jQuery trabalha na maior parte do tempo com vetores, quando chamamos eq(n) estamos na verdade acessando a posição n de um vetor que contém vários objetos que foram selecionados de acordo com o seletor especificado. Por exemplo, se executo o comando:
var el = $("li")
o jQuery na verdade retornará um vetor de elementos li, onde:
el[0] == <li>Item A</li>
el[1] == <li>Item B</li>
...
el[7] == <li>Item W</li>
Filtro gt(n)
Similar ao filtro eq(), porém seleciona todos elementos cujo índice seja maior que n (greater than n). No exemplo abaixo, selecionamos os elementos <li> cujos índices são maiores que 3:
<script>
$(document).ready(function(){
$("li:gt(3)").css("color","blue");
});
</script>
Os elementos selecionados serão:
<li>Item P</li>
<li>Item L</li>
<li>Item Q</li>
<li>Item W</li>
Filtro lt(n)
Similar ao filtro gt(), porém seleciona apenas os elementos cujo índice seja menor que n (less than n). No exemplo abaixo, selecionamos os elementos <li> cujos índices são menores que 3:
<script>
$(document).ready(function(){
$("li:lt(3)").css("color","blue");
});
</script>
Os elementos selecionados serão:
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
Filtro not()
O filtro not permite negar um seletor, fazendo com que apenas os elementos que não estejam na negação sejam selecionados. No exemplo abaixo é solicitado que sejam selecionados todos os elementos <li> que não estejam dentro de um <ul>.
<script>