Navegação jQuery - método find()
Exemplo
Procurar todos os elementos span descendentes de todos os parágrafos e definir sua cor para vermelha:
$("p").find("span").css('color','red');
Definição e uso
O método find() obtém os descendentes de cada elemento na coleção de elementos atual, filtrando por seletor, objeto jQuery ou elemento.
Sintaxe
.find(selector)
| Parâmetro | Descrição |
|---|---|
| selector | Valor de string, contendo a expressão de seletor fornecida para correspondência com a coleção de elementos atual. |
Explicação detalhada
Se fornecermos um objeto jQuery que representa uma coleção de elementos DOM, o método .find() nos permite procurar esses elementos nos descendentes da árvore DOM e construir um novo objeto jQuery com os elementos correspondentes. O .find() é semelhante ao método .children(), mas o último apenas percorre uma única camada da árvore DOM.
A primeira característica明显特征é que o método .find() aceita uma expressão de seletor do tipo idêntico à que passamos para a função $(). Ele filtra os elementos através de testes de correspondência com essa expressão.
Pense na seguinte lista aninhada simples:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Vamos começar a procurar itens na lista II:
$('li.item-ii').find('li').css('background-color', 'red');
O resultado dessa pesquisa é que os projetos A, B, 1, 2, 3 e C foram configurados com fundo vermelho. Mesmo que o projeto II atenda à expressão do seletor, ele não será incluído nos resultados; apenas os descendentes serão correspondidos.
Diferente dos outros métodos de varredura de árvore, a expressão do seletor é um parâmetro necessário para .find(). Se precisarmos recuperar todos os elementos descendentes, podemos passar o seletor de coringa '*'.
O contexto do seletor é implementado pelo método .find(); portanto, $('li.item-ii').find('li') é equivalente a $('li', 'li.item-ii').
Para o jQuery 1.6, também podemos usar uma coleção jQuery ou elemento给定 para a filtragem. Ainda na lista aninhada acima, escrevemos primeiro assim:
var $allListElements = $('li');
Então, passe esse objeto jQuery para o método find:
$('li.item-ii').find( $allListElements );
O código acima retornará uma coleção jQuery que contém elementos da lista II descendentes.
Da mesma forma, você também pode passar um elemento:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
O resultado dessa chamada é que o projeto 1 foi configurado com fundo vermelho.
