Navegar en el DOM con las funciones find() y closest()

Escrito por: TiraCodigo
Etiquetas: jQuery, existe, HTML, DOM, find, ejemplo

Existen diferentes funciones en jQuery que te ayudaran para navegar dentro de los elementos de una página (DOM), aquí explicaremos dos de las mas importantes que te resolverán todos los problemas a la hora de seleccionar un elemento.

Estas funciones son:

find(parametro): Esta función te ayuda a navegar entre elementos hijos en el árbol del DOM, es decir, hacia abajo o en los elementos internos, donde el parámetro sera el nombre de la clase del elemento a seleccionar o el id de la misma.

closest(parametro): Esta función te ayudara a navegar entre los elementos superiores del árbol del DOM, es decir, hacia arriba, donde el parámetro sera el nombre de la clase del elemento a seleccionar o el id de la misma.

 supongamos que tenemos el siguiente árbol de elementos:

<div class="fila"> 
  <div class="elemento"> 
    <p class="texto">Elemento 1</p> 
    <button class="btnAlerta">Botón 1</button> 
  </div> 
  <div class="elemento"> 
    <p class="texto">Elemento 2</p> 
    <button class="btnAlerta">Botón 2</button> 
  </div> 
</div>

Supongamos que queremos que se muestre en una alerta el texto correspondiente al elemento de cada botón, eso lo lograríamos con la siguiente linea:

$(".btnAlerta").click(function() {
alert($(this).closest('.elemento').find('texto').text());
});

Donde, con this seleccionamos al botón que se ha sumido, luego con closest buscaremos el elemento superior que tenga la clase "elemento", y una vez en esa, buscaremos el elemento interno que tenga la clase "texto" con la función find, y de ese elemento, pedimos su contenido con la función text().

Si diéramos click en el Botón 1 nos mostraría una alerta que dirá "Elemento 1", y si damos click en el Botón 2, saldrá en la alerta "Elemento 2".