JQuery – #06. Traversing I. Recorrido de elementos

Unidad
Materiales

En lecciones anteriores vimos cómo utilizar jQuery para modificar elementos y para cambiar sus estilos. En esta ocasión veremos cómo movernos a través del DOM de nuestra web.

Traversing significa «moverse a través» y se utiliza para encontrar o seleccionar elementos HTML teniendo enc uenta la relación de éstos con otros elementos. Comenzaremos a con una selección de uno o más elementos y nos moveremos a través de ella hasta que lleguemos al que estamos buscando.

Podemos hablar de las siguientes relaciones de elementos:

  • Current, o elemento actual.
  • Ancestors, es decir, antecesores o predecesores (nodos padre, abuelo, etc.).
  • Descendants, o descendientes (nodos hijo, nieto, etc.).
  • Siblings, o nodos hermano (nodos que comparten el mismo nodo padre).

jQuery provee de una gran variedad de métodos que nos permiten atravesar el DOM, la mayoría de ellos utilizando el árbol DOM del documento, entre los que se encuentran:

  • Antecesores:
    • .parent(): padre directo.
    • .parents(): todos los antecesores hasta html.
    • .parentsUntil(): todos los antecesores hasta uno en concreto.
    • .closest(): antecesor más cercano que tiene esa etiqueta.
  • Descendientes:
    • .children(): hijos directos.
    • .find(): hijos que cumplen con una condición.
    • .siblings(): todos los hermanos.
    • .next() y .prev(): siguiente hermano y hermano anterior.
    • .nextAll() y .prevAll(): todos los siguientes hermanos y todos los hermanos anteriores.
    • .nextUntil() y .prevUntil(): el siguiente o anterior hermano hasta uno en concreto.
  • Filtros:
    • .has(): elemento que contiene elementos indicados en el selector pasado entre paréntesis.
    • .not(): elemento que no cumple con el criterio indicado entre paréntesis.
    • .first(): primer elemento que cumple con un criterio.
    • .last(): último elemento que cumple con un criterio.
    • .eq(número): elemento que se encuentra en la posición indicada entre paréntesis.
  • Añadir elementos:
    • .add(): añade elementos a una selección (¡ojo! No los crea).

¡Consulta el siguiente vídeo para ver ejemplos de cada uno de los métodos!

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!