jQuery Anotação - método children()
Instância
Encontrar todos os elementos filhos dos divs com classe "selected" e configurá-los como azul:
$("div").children(".selected").css("color", "blue");
Definição e uso
O método children() retorna todos os elementos filhos diretos do elemento selecionado.
Sintaxe
.children(selector)
| Parâmetro | Descrição |
|---|---|
| selector | Valor de string, contendo a expressão de seletor que coincide com os elementos. |
Explicação detalhada
Se fornecermos um objeto jQuery que representa uma coleção de elementos DOM, o método .children() nos permite recuperar esses elementos do árvore DOM e construir um novo objeto jQuery com os elementos correspondentes..find() É semelhante ao método .children(), mas o último apenas percorre um único nível da árvore DOM.
Observe que, como a maioria dos métodos jQuery, .children() não retorna nós de texto; se precisar obter todos os nós filhos, incluindo nós de texto e comentários, use .contents().
Este método aceita uma expressão de seletor como parâmetro opcional, do mesmo tipo que passamos para o $(). Se aplicarmos o seletor, testará se o elemento corresponde à expressão, filtrando assim esses elementos.
Pense nessa página com uma lista aninhada básica:
<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>
Se começarmos com a lista level-2, podemos encontrar seus elementos filhos:
$('ul.level-2').children().css('background-color', 'red');
O resultado dessa linha de código é que os itens A, B, C recebem o fundo vermelho. Como não aplicamos uma expressão de seletor, o objeto jQuery retornado contém todos os elementos filhos. Se aplicarmos um seletor, apenas incluirá os itens que correspondem.
