Selectores jerárquicos

selectores-en-jQuery

Seguimos viendo el tema de los selectores en jQuery, que son muy importantes porque estos son los que nos facilitan las tareas a la hora de interactuar con los elementos del documento HTML.

En este tutorial hablaremos de los selectores jerárquicos, estos tipos de selectores nos van a permitir seleccionar elementos que estén en contextos con otros elementos HTML. Así que comencemos a ver cuáles son:

Cabe recalcar, que si sabes utilizar CSS, ya sabrás utilizar estos selectores en jQuery.

☰ Selector Descendiente.

Descendant Selector (“ancestor descendant”)
Este selector selecciona todos los elementos que son descendiente de un padre especificado en la función de selección de jQuery, el descendiente puede ser hijo directo, hijo segundo o haciendo referencia al DOM como árbol familiar podemos decir que seleccionara al hijo, nieto, bisnieto, tataranieto etc.  Ejemplo: $( "div p" ) seleccionar todos los párrafos que están dentro de un div.

selector-descendiente

Como vemos con este tipo de selector seleccionamos todos los elementos que especifiquemos como después del primer valor que en este caso hace el papel de padre.

 

☰ Selector de Hijos directos.

Child Selector (“parent > child”)

Este selector selecciona los elementos que son hijos directos del elemento especificado como primer valor en la función de selección de jQuery. Ejemplo: si tenemos $(‘ul > li’) este seleccionar los elementos <li> que son hijos inmediatos de una lista desordenada <ul>. Veamos un pequeño ejemplo:

selector-hijo-directo-jquery

A diferencia del Selector Descendiente, este selecciona solamente al párrafo que es hijo directo del div y omite a los otros párrafos que aunque están dentro del div no son hijos directos.

 

☰ Selector Adyacente Siguiente.

Next Adjacent Selector (“prev + next”)

Este selector selecciona los elementos que coinciden con los que especificamos en la función de selección de jQuery y que esta después  del primer valor indicado. Veamos:

Next-Adjacent-Selector-jquery

Como vemos con la declaración jQuery que hemos hecho solo seleccionamos al article que esta después de de un párrafo.

 

☰ Selector Hermanos Siguiente.

Next Siblings Selector (“prev ~ siblings”)

Selecciona todos los elementos  hermanos que siguen después del elemento seleccionado como  primer valor en la función de selección de jQuery y que tienen el mismo padre. Ejemplo: $(‘div.uno ~ p’), esto selecciona al elemento p que esta precedido por un div con clase uno, que tienen el mismo padre y estén en el mismo nivel Jerárquico. Veamos:

Next-Siblings-Selector-jquery-1

No coincide porqué no hay ningún párrafo que sea hermano siguiente de un div en el código anterior. Pero si colocamos un párrafo en el mismo nivel de jerarquía del div y que sea hermano siguiente, si que funcionara. Veamos.

Next-Siblings-Selector-jquery-2

 

Para más información de los selectores Jerárquicos en jQuery:  http://api.jquery.com/category/selectors/hierarchy-selectors/

1 Respuesta

  1. CARLOS GOMEZ dice:

    Muy buen tutor, todo entendido

    Gracias 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *