jQuery Blues: 4. Selectores jerárquicos

Tutorial de jQuery 4. En este capítulo veremos cómo funcionan los selectores jerárquicos de jQuery.

klimt

archivado en: JavaScript / 26 octubre, 2012 / taller:

En la entrada anterior vimos cómo seleccionar los elementos de un documento mediante los selectores element, #id y .class. En esta vamos a ver otros selectores algo más complejos, no mucho, pero antes es interesante que hagamos esta pequeña práctica.

En vez de cambiar la propiedad css de un elemento cuando el documento esté listo (ready), vamos a modificarla cuando el usuario pulse un enlace. Para eso necesitamos dos selectores, en el primero asociaremos la función del evento (click) y en la segunda indicaremos cuál es el elemento sobre el que debe actuar.

Por ejemplo, imaginemos una página web donde se pide al usuario que escoja la respuesta correcta y se incluye un botón, un enlace, para saber cuál es. Algo así:

¿Quién fue Safo?

  • Una aviadora argentina
  • Una poetisa griega
  • Una valquiria vikinga
  • Una rusa revolucionaria

Comprobar respuesta

Como sabemos que es la segunda opción, ahí vamos a colocar el identificador "respuesta_correcta".

<!DOCTYPE html>

<html>

<head>

<title>

página de pruebas

</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">

$.noConflict();

jQuery(document).ready(function($) {

jQuery("#comprueba_respuesta").click(function () {

jQuery("#respuesta_correcta").css("color", "#900");

});

});

</script>

</head>

<body>

<b>¿Quién fue Safo?</b>

<ul id="pregunta1">

<li class="respuesta_incorrecta">Una aviadora argentina</li>

<li id="respuesta_correcta">Una poetisa griega</li>

<li class="respuesta_incorrecta">Una valquiria vikinga</li>

<li class="respuesta_incorrecta">Una rusa revolucionaria</li>

</ul>

<a href="#" id="comprueba_respuesta">Comprobar respuesta</a>

</body>

</html>

Ahora vamos a realizar la misma operación, pero seleccionando la respuesta correcta de otra manera: recorriendo el documento.

Selectores jerárquicos

Como vimos en la primera entrada, con DOM se establece una jerarquía entre los distintos elementos (nodos). Así, en el caso anterior, todos los elementos <li> son hijos del padre <ul>, que a su vez es hijo de <body>. Con jQuery se puede seleccionar los elementos recorriendo esta jerarquía de las siguientes maneras:

1. Descendant Selector (“ancestor descendant”)

Selecciona los descendientes del antecesor, del padre, indicado. Sin estar separados por comas, primero se indica el padre y luego el descendiente. Por ejemplo, esto seleccionaría todos los hijos (<li>) de una lista (<ul>).


jQuery("ul li")...

Para indicar ancestros y descendientes sirve cualquiera de los tres selectores básicos que ya conocemos, es decir, por elemento, por id y por clase. Así, en el caso anterior, podríamos seleccionar todas las respuestas (<li>) indicando el id del <ul> que las contiene:


jQuery("#pregunta1 li").css("color", "#900");

Y, para seleccionar las que son incorrectas, en el descendiente podemos usar la clase .respuesta_incorrecta. Ahora sabemos cómo mejorar el script anterior destacando en verde la respuesta correcta y en rojo las incorrectas:


$.noConflict();

jQuery(document).ready(function($) {

jQuery("#comprueba_respuesta").click(function () {

jQuery("#pregunta1 .respuesta_incorrecta").css("color", "#900");

jQuery("#pregunta1 #respuesta_correcta").css("color", "#090");

});

});

Tal vez alguien piense que este método de selección no es muy útil, pues para el caso anterior se podrían haber empleado selectores básicos, pero imaginemos qué sucedería si en vez de una pregunta tuviéramos 5. Si no se manejan selectores jerárquicos, sería una lata, habría que definir tropecientas clases e identificadores: .respuesta_incorrecta_pregunta1; .respuesta_incorrecta_pregunta2... Sin embargo, de esta manera solo hay que definir un identificador para cada <ul>.

En este caso, el primer elemento y el segundo están separados por el signo: >

Este selector es muy parecido al anterior, pero se distingue en que solo selecciona los hijos directos. Por ejemplo, en este párrafo hay tres elementos marcados con negrita (<b>):

<p id="estrofa1">Canta, oh musa, la cólera del pelida <b>Aquiles</b>; cólera funesta que causó infinitos males a los aqueos y precipitó al Hades muchas almas valerosas de héroes, a quienes hizo presa de perros y pasto de aves; cumplíase la voluntad de <span class="dioses"><b>Zeus</b></span> desde que se separaron disputando el <b>Átrida</b>, rey de hombres, y el divino Aquiles.</p>

Este selector descendant colorearía de rojo los tres elementos:


jQuery("#estrofa1 b").css("color", "#900");

Sin embargo, como Zeus está dentro de un elemento <span>, que es su padre directo, si usáramos un child selector, solo se colorearían Aquiles y Átrida.


jQuery("#estrofa1 > b").css("color", "#900");

3. Next Adjacent Selector (“prev + next”)

Next Adjacent selecciona el primer elemento (next) que se encuentra después de la etiqueta de cierre del que se ha definido en prev. Es un poco lío, pero se entiende bien con un ejemplo. En el caso anterior tenemos un elemento <b></b> que está después de un elemento <span></span> que lleva por clase .dioses, así que esta instrucción colorearía Átrida.


jQuery(".dioses + b").css("color", "#900");

Es decir, no afecta a Zeus, que se encuentra dentro del elemento .dioses, sino al primero que está tras la etiqueta de cierre de .dioses (</span>).

4. Next Siblings Selector (“prev ~ siblings”)

Este selector resulta más comprensible si sabemos que siblings significa en inglés «hermanos», ya que eso es precisamente lo que hace: seleccionar todos los elementos iguales (hermanos) que se encuentran después del elemento definido en prev (y dentro del mismo contenedor padre). Por ejemplo, para este párrafo


<p>En <span class="ciudad">Londres,</span> a principios del mes de <b>junio</b> de 1929, el anticuario <b>Joseph Carthapilus,</b> de <i>Esmirna</i>, ofreció a la princesa de <b>Lucinge</b> los seis volúmenes en cuarto menor (1715-1720)  de la <i> Ilíada </i> de Pope.</p>
<b>Borges</b>. <i> El Inmortal</i>

Esta sentencia


jQuery(".ciudad  ~ b").css("color", "#900");

Colorea todas las negritas incluidas en <p> que siguen a la clase .ciudad. Es decir: junio,  Joseph Carthapilus y Lucinge.

Hay otro tipo de selectores además de los básicos y los jerárquicos, pero como verlos todos de sopetón es aburrido en el próximo capítulo ya comenzaremos con los eventos y los cambios de CSS. Mientras tanto, una práctica sobre lo que hemos aprendido en esta.

Práctica

A partir de esta tabla base:

<table>

<thead><tr><th>Divinidad</th><th>Mitología</th></tr></thead>

<tr><td>Loki</td><td>Nórdica</td></tr>

<tr><td>Atenea</td><td>Griega</td></tr>

<tr><td>Afrodita</td><td>Griega</td></tr>

<tr><td>Quetzalcoatl</td><td>Maya</td></tr>

</table>

Añadiendo clases o identificadores si se necesitan, mediante selectores jerárquicos:

  • Programar un enlace que ponga en negrita los textos del encabezado
  • Programar un enlace que coloree en rojo los dioses griegos
  • Lo mismo, con otro color, para los dioses mayas y los nórdicos
  • Por último, otro enlace que ponga en itálica (i) la mitología a la que pertenece cada dios.

(Es mucho más sencillo de lo que parece 😉 ).

|| Tags:

valoración de los lectores sobre jQuery Blues: 4. Selectores jerárquicos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.6 sobre 5 (15 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “jQuery Blues: 4. Selectores jerárquicos

Aportar un comentario


*