jQuery Navegação - método closest()

Manual de referência de iteração jQuery

Exemplo

Este exemplo demonstra como usar o closest() para delegação de eventos. Quando o elemento da lista mais próximo ou seus descendentes são clicados, a cor de fundo amarela será alternada:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Experimente pessoalmente

Definição e uso

O método .closest() obtém o primeiro elemento ancestral que coincide com o seletor, começando do elemento atual no árvore DOM.

Sintaxe

.closest(selector)
Parâmetro Descrição
selector Valor de string, contendo a expressão do seletor que coincide com o elemento.

Explicação detalhada

Se fornecido um objeto jQuery que representa uma coleção de elementos DOM, o método .closest() nos permite recuperar esses elementos no árvore DOM e seus elementos ancestrais, criando um novo objeto jQuery com os elementos correspondentes..parents() Muito parecido com o método .closest(), ambos navegam pelo árvore DOM para cima. A diferença entre eles, embora sutil, é importante:

.closest() .parents()
Começa a partir do elemento atual Começa a partir do elemento pai
Navega pelo árvore DOM para cima até encontrar um elemento que correspondente ao seletor aplicado. Navega pelo árvore DOM para cima até o elemento raiz do documento, adicionando cada elemento ancestral a uma coleção temporária; se um seletor foi aplicado, a coleção será filtrada com base no seletor.
Retorna um objeto jQuery que contém zero ou um elemento Retorna um objeto jQuery que contém zero, um ou vários elementos

Por favor, veja o fragmento HTML abaixo:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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>

Exemplo 1

Suponha que executemos uma busca no elemento <ul> começando pelo item A:

$('li.item-a').closest('ul').css('background-color', 'red');

Experimente pessoalmente

Isso mudará a cor do <ul> level-2, pois ao percorrer a árvore DOM, o elemento é encontrado primeiro.

Exemplo 2

Suponha que estejamos procurando o elemento <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Experimente pessoalmente

Isso mudará a cor do item da lista A. Antes de percorrer a árvore DOM, o método .closest() começa a procurar a partir do elemento li até que o seletor encontre o item A.

Exemplo 3

Podemos passar um elemento DOM como contexto, onde procuramos o elemento mais próximo.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Experimente pessoalmente

O código acima mudará a cor do <ul> level-2, pois ele é tanto o ancestral direto do item A quanto o descendente do item II. Ele não mudará a cor do <ul> level-1, pois não é descendente do item II.

Manual de referência de iteração jQuery