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