30/01/2023 jquery 3m 43s 0 20528
En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores,...
Selectores de jerarquia en jQuery
25 de /abril04 de /2015
8m 17s
jquery
0 comentarios
12651
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
Quizás te interese ...
22/03/2020 jquery 1m 20s 0 11035
Los parámetros de url son muy útiles para pasar datos a aplicaciones web, hoy en día su uso se está extendiendo más gracias a NodeJS, el...
6/12/2015 jquery 6m 40s 3 12563 4.7
¿Cuantas funciones js hay en total en nuestro sitio web? Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente...
10/06/2015 jquery 10m 53s 1 9172 5
La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador...
Valoraciones
Sé el primero en valorar