jQuery nos permite acceder a cualquier elemento del DOM de un documento web de varias formas, podemos navegar por el árbol del documento seleccionando cada uno por su etiqueta, clase o identificador entre otras, en este articulo vamos a ver como acceder a ciertos elementos de un documento web por su parentesco o jerarquía con otros elementos del DOM mediante métodos y selectores de jerarquia.

Descendientes directos (Hijos)

Para seleccionar u obtener elementos “hijo” de un elemento tenemos las siguientes opciones:

Child Selector (“parent > child”)

Selector de jerarquía – Selecciona todos los elementos “hijo” de un elemento.

<ul>
	<li>Child 1</li>
	<li>Child 2</li>
	<li>Child 3</li>
</ul>
// $ ("ul > li").css("color", "blue");

.children()

Método – Con este método tambien obtenenemos todos los elementos “hijo” de un elemento.

<ul>
	<li>Child 1</li>
	<li>Child 2</li>
	<li>Child 3</li>
</ul>
// $ ("ul").children().css("color", "blue");

El método “.children()” nos permite también filtrar los selectores con la sintaxis (.children(“selector”)), a continuación vemos un ejemplo mas complejo utilizando el selector y el método conjuntamente.

<ul>
	<li class="a">Child 1</li> // blue
	<li class="a">Child 2</li> // blue
	<li class="b">Child 3</li> // red
	<li class="b">Child 4</li> // red
	<li class="c">Child 5</li>
	<li class="c">Child 6</li>
</ul>
// $ ("ul > li.a").css("color", "blue");
// $ ("ul").children(".b").css("color", "red");

Todos los descendientes

Para seleccionar u obtener elementos descendientes de un elemento tenemos las siguientes opciones:

Descendant Selector (“ancestor descendant”)

Selector de jerarquía – Con este selector seleccionamos todos los elementos descendientes de un elemento, tanto los directos (“hijo”) como los sucesivos siempre y cuando estos se encuentren dentro del elemento padre.

<ul>
	<li>
		<a href="#">Link 1</a>
	</li>
	<li>
		<a href="#">Link 2</a>
	</li>
	<li>
		<a href="#">Link 3</a>
	</li>
</ul>
// $ ("ul a").css("color", "blue");

.find()

Método – Este método es lo mas parecido al selector de jerarquía anterior, nos permite obtener un elemento especifico entre todos los elementos hijos y descendientes de un elemento, hijos, nietos … :), en el siguiente ejemplo aplicamos el filtro al método “.find()”.

<ul>
	<li>
		<a href="#">Link 1</a>
	</li>
	<li>
		<a href="#" class="link">Link 2</a>
	</li>
	<li>
		<a href="#" class="link">Link 3</a>
	</li>
</ul>
// $ ("ul").find("a.link").css("color", "blue");

Hermanos

Para seleccionar los hermanos de un elemento disponemos de las siguientes opciones:

Next Adjacent Selector (“prev + next”)

Selector de jerarquía – Selecciona los elementos hermanos directos que siguen directamente a un elemento.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li class="prev">Child 5</li>
	<li>Child 6</li>
	<li>Child 7</li>
</ul>
// $ (".prev + li").css("color", "blue");

.next()

Método – Obtiene los elementos hermanos directos que siguen directamente a un elemento.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li class="prev">Child 5</li>
	<li>Child 6</li>
	<li>Child 7</li>
</ul>
// $ (".prev").next("li").css("color", "blue");

.prev()

Método – Obtiene los elementos hermanos que preceden directamente a un elemento.

<ul>
	<>Child 1</li>
	<li>Child 2</li>
	<li class="prev">Child 3</li>
	<>Child 4</li>
	<li>Child 5</li>
	<li class="prev">Child 6</li>
</ul>
// $ (".prev").prev("li").css("color", "blue");

Next Siblings Selector (“prev ~ siblings”)

Selector de jerarquía – Selecciona todos los elementos que le siguen directamente a un elemento y a todos sus hermanos en el mismo nivel de jerarquía.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li>Child 5</li>
</ul>
// $ (".prev ~ li").css("color", "blue");

.nextAll()

Método – Con este método también podemos obtener todos los elementos que le siguen directamente a un elemento y a todos sus hermanos en el mismo nivel de jerarquía.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li>Child 5</li>
</ul>
// $ (".prev").nextAll("li").css("color", "blue");

.prevAll()

Método – Con este método obtenemos todos los elementos que le preceden directamente a un elemento y a todos sus hermanos en el mismo nivel de jerarquía.

<ul>
	<li>Child 1</li>
	<li>Child 2</li>
	<li class="prev">Child 3</li>
	<li>Child 4</li>
</ul>
// $ (".prev").prevAll("li").css("color", "blue");

.siblings()

Método – Este método nos permite obtener todos los elementos hermanos de un elemento en el mismo nivel de jerarquía.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li>Child 5</li>
</ul>
// $ (".prev").siblings("li").css("color", "blue");

Padres y ascendientes

Para obtener los elementos padre o ascendientes de un elemento disponemos de los siguientes métodos.

.parent()

Método – Con este método obtenemos el elemento padre de un elemento.

<ul>
	<li>Child 1</li>
	<li class="prev">Child 2</li>
	<li>Child 3</li>
	<li>Child 4</li>
	<li>Child 5</li>
</ul>
// $ (".prev").parent().css("color", "blue");

.parents()

Método – Con este método obtenemos los elementos ascendientes de un elemento.

<div>
	<ul>
		<li><a>Child</a></li>
	</ul>
</div>
// $ ("a").parents("ul, div").css("color", "blue");

Existen otros métodos que veremos en otros articulos y que podemos utilizar para recorrer el DOM con jQuery, con los que hemos visto hasta ahora, mas los selectores de jerarquía y los selectores básicos cubrimos la mayoría de necesidades para recorrer y operar sobre el arbol del documento

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies