jQuery recorrer - método closest()

Manual de Referencia de Navegación de jQuery

Ejemplo

Este ejemplo muestra cómo realizar delegación de eventos utilizando closest(). Cuando se haga clic en el elemento de lista más cercano o en uno de sus descendientes, se cambiará el fondo amarillo:

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

Prueba personalmente

Definición y uso

El método .closest() obtiene el primer elemento ascendiente que coincide con el selector, comenzando desde el elemento actual en el árbol DOM.

Sintaxis

.closest(selector)
Parámetros Descripción
selector Valor de cadena que contiene la expresión del selector que coincide con el elemento.

Descripción detallada

Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .closest() nos permite recuperar estos elementos y sus elementos ascendientes en el árbol DOM, y construir un nuevo objeto jQuery con los elementos coincidentes..parents() Al igual que el método .closest(), ambos recorren el árbol DOM hacia arriba. La diferencia entre ellos, aunque sutil, es importante:

.closest() .parents()
Desde el elemento actual Desde el elemento padre
Navega por el árbol DOM hacia arriba hasta encontrar un elemento que coincida con el selector aplicado. Navega por el árbol DOM hacia arriba hasta que se encuentre con el elemento raíz del documento, añadiendo cada elemento ancestro a una colección temporal; si se ha aplicado un selector, se filtrará esta colección basándose en ese selector.
Devuelve un objeto jQuery que contiene cero o uno de los elementos Devuelve un objeto jQuery que contiene cero, uno o varios elementos

Por favor, vea el siguiente fragmento de HTML:

<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>

Ejemplo 1

Supongamos que realizamos una búsqueda desde el proyecto A para el elemento <ul>:

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

Prueba personalmente

Esto cambiará el color del <ul> de nivel-2, porque es el primer elemento al que se encuentra al navegar por el árbol DOM hacia arriba.

Ejemplo 2

Supongamos que estamos buscando el elemento <li>:

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

Prueba personalmente

Esto cambiará el color del proyecto A. Antes de navegar por el árbol DOM hacia arriba, el método .closest() comenzará en el elemento li mismo y buscará hasta que coincida con el proyecto A.

Ejemplo 3

Podemos pasar un elemento DOM como contexto, en el que buscar el elemento más cercano.

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');

Prueba personalmente

El código anterior cambiará el color del <ul> de nivel-2, ya que es tanto el primer antepasado <ul> del elemento de lista A como el descendiente del elemento de lista II. No cambiará el color del <ul> de nivel-1, porque no es el descendiente del elemento de lista II.

Manual de Referencia de Navegación de jQuery