jQuery Traversal - parents() Method
Definition and Usage
parents() returns the ancestor elements of each element in the current matched element set, using a selector for filtering is optional.
.parents()selector)
| Parâmetro | Descrição |
|---|---|
| selector | Valor de string, contendo a expressão do seletor usada para coincidir com os elementos. |
Explicação detalhada
Se fornecermos um objeto jQuery que representa uma coleção de elementos DOM, o método .parents() permite que busquemos os elementos pais desses elementos no DOM e construamos um novo objeto jQuery com os elementos coincidentes, ordenados do pai mais próximo para cima. Os elementos são retornados na ordem do pai mais próximo para fora. .parents() e .parent() O método é semelhante, mas o último percorre apenas um nível no DOM.
Este método aceita uma expressão de seletor opcional, do tipo de parâmetro passado para a função $(). Se aplicarmos este seletor, faremos a filtragem dos elementos verificando se eles coincidem com o seletor.
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 pelo item A, podemos encontrar seus elementos pais:
$('li.item-a').parents().css('background-color', 'red');
O resultado da chamada é que os elementos level-2, item II e level-1, entre outros (até <html> no caminho do DOM), têm o fundo vermelho definido. Como não aplicamos a expressão do seletor, o elemento pai naturalmente se tornou parte do objeto. Se aplicamos o seletor, antes de incluir o elemento, verificamos se ele coincide com o seletor. Como não aplicamos a expressão do seletor, todos os elementos ancestrais são parte do objeto jQuery retornado. Se aplicamos o seletor, apenas incluirá os itens que coincidem.
