jQuery – Métodos .parent(), .parents() e .closest()

On 15 de março de 2012, in jQuery, by andersonstraube

O jQuery apresenta várias formas de navegação pelo DOM, neste post pretendo explicar sobre a navegação nos elementos ascendentes tendo como foco os três importantes métodos do jQuery: .parent(), .parents() e .closest().

Observe o seguinte código html:


<ul id="menu">
    <li>
        <span>Menu 1</span>
        <ul>
            <li>Submenu 1 - item 1</li>
            <li>Submenu 1 - item 2</li>
            <li>
                <span>Submenu 1 - item 3</span>
                <ul class="submenu">
                    <li id="submenu3i">Submenu 1 - item 3.1</li>
                    <li id="submenu3ii">Submenu 1 - item 3.2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span>Menu 2</span>
        <ul>
            <li>Submenu 2 - item 1</li>
            <li>Submenu 2 - item 2</li>
        </ul>
    </li>
</ul>

Partiremos do princípio que temos o elemento $(“#submenu3ii”) e queremos ir até a primeira ul de id=”menu” (raiz), vejamos como usar os 3 métodos deste post:

Método .parent():


var elemento = $('#submenu3ii'); 
var menu = elemento.parent().parent().parent().parent().parent();

O parent() sempre retorna imediatamente o elemento anterior, por isso precisamos usar o parent() até chegar no objeto que queremos. A grande desvantagem de utilizar o parent() é que se for um conteúdo dinâmico e/ou cujo html sofra modificações nós precisamos dar manutenção no código js também, sem falar que não é um código muito legível com essa quantidade de parent().

Método .parents():


var elemento = $('#submenu3ii'); 
var menu = elemento.parents('ul.menu:eq(0)');

O parents() já resolve nosso problema e o código não fica tão poluído. Sua busca é realizada nos elementos ascendentes e retorna todos os objetos que combinem com o seletor informado, por isso o uso do “:eq(0)”.

Método .closest():


var elemento = $('#submenu3ii'); 
var menu = elemento.closest('ul.menu');

O closest() é semelhante ao exemplo anterior, a diferença é que o parents() retorna todos os elementos encontrados, já o closest() retorna apenas o primeiro elemento que combine com o seletor informado.

Os métodos .parents() e .closest() são semelhantes e ambos percorrem a árvore do DOM. As diferenças entre os dois, embora sutis, são significativas, vejamos:

.closest()

  • Inicia a busca a partir do próprio elemento;
  • Percorre a árvore do DOM ascendentemente até encontrar uma correspondência para o seletor;
  • O objeto retornado contém zero ou um elemento.

.parents()

  • Inicia a busca a partir do elemento pai;
  • Percorre a árvore do DOM até a raiz do documento, adicionando cada elemento encontrado para uma coleção temporária, em seguida filtra nessa coleção com base no seletor informado;
  • O objeto retornado contém zero, um ou vários elementos.

Sabendo essas diferenças aplicamos sua lógica onde for mais conveniente 😉

Tagged with:  

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *