Selectores de Jerarquía en jQuery

Selectores que sirven para seleccionar elementos atendiendo a la estructura o jerarquía de las etiquetas de la página.

En los últimos artículos del Manual de jQuery hemos hablado sobre los selectores. Como ya dijimos, sirven para seleccionar elementos de la página con los que queremos trabajar desde Javascript por medio del framework. En concreto vimos los selectores básicos, con los que podremos resolver la mayoría de nuestras necesidades en cuanto a selección de elementos.

No obstante, en jQuery existen varios otros tipos de selectores, junto con algunos filtros, que hacen todavía más potente el framework de cara a acceder a las etiquetas o elementos que deseamos seleccionar. Vamos a ver en este artículo qué son los selectores de jerarquía y algunos ejemplos de uso.

Sabemos que la página está compuesta por etiquetas HTML que se meten unas dentro de otras, formando una jerarquía de etiquetas o de elementos. Los selectores de Jerarquía permiten utilizar la propia estructura de la página para acceder a unos elementos dados, que se seleccionan a través de la jerarquía existente de etiquetas en la página. Dentro de éstos, existen a su vez varias posibilidades, que hacen uso de criterios de descendencia, ascendencia, siguiente, anterior, etc.

Selector ancestor descendant: 

Sirve para seleccionar elementos de la página que son descendientes de otro y que además se corresponden con un selector dado. Para este selector se indican dos datos, separados por un espacio. Primero el selector para definir el elemento o elementos antecesores y el segundo selector para definir el tipo de elementos que se tienen que seleccionar de entre los descendientes.

$("p b") //selecciona todas las etiquetas B que hay dentro de las etiquetas P
$("p.parraforojo i") //selecciona todas las etiquetas I que hay dentro de los párrafos con clase "parraforojo".
$("table.mitabla td") //selecciona todas las etiquetas TD que hay en las tablas que tienen class="mitabla"

Selector parent > child: 

Con el selectorr parent > child podemos acceder a elementos que sean hijos directos de otros. Para ello indicamos un selector como "parent" y un selector como "child". Nos seleccionará todos los elementos que son hijos directos de parent y que concuerdan con el selector child.

$("p > b") //selecciona todas las etiquetas B que son hijas directas de los párrafos.
$("#capa > *") //selecciona todas las etiquetas que son hijas directas del elemento con id="capa"

Nota: la diferencia entre "ancestor descendant" y "parent > child" es que este último sólo selecciona los hijos directos. Por ejemplo, en el HTML siguiente:

<p><b>Párrafo</b> que tiene alguna <b>negrita</b> e <span class="algo"><i>itálica</i></span> para seleccionar</p>

$("p > b") seleccionaría los mismos elementos que $("p b"), porque en este caso todas las etiquetas B son hijas directas de P.

Pero en el caso de la itálica (etiqueta I), que está metida dentro del párrafo, pero dentro también de un span, $("p i") seleccionaría la etiqueta I por ser descendiente de P, pero $("p > i") no seleccionaría la etiqueta I, por no ser hija directa de P.

Selector prev + next: 

Con este selector conseguimos acceder a las elementos que están después de otros, es decir, a las etiquetas que concuerdan con el selector "next", que se abren después de cerrar las etiquetas que concuerdan con el selector "prev".

$("p.parraforojo + p") //Esto selecciona los párrafos que están después de cualquier párrafo que tenga la clase "parraforojo"
$("i + b") //selecciona todas las negritas (etiqueta B) que hay después de una itálica (etiqueta I)

Selector prev ~ siblings: 

Selecciona los elementos hermanos que hay a continuación de los elementos que concuerden con el selector "prev", que son del tipo que se especifica con el selector "siblings". Los elementos hermanos son los que están en el mismo contenedor y se encuentran en el mismo nivel de jerarquía.

$("#miparrafo ~ table") //selecciona los elementos TABLE que son hermanos del elemento con id="miparrafo"
$("#a2 ~ div.clase") //selecciona los elementos hermanos del que tiene el id="a2" que sean etiquetas DIV con la class="clase".

Probando los selectores jQuery de Jerarquía

Hemos hecho un rápido script que prueba los selectores de jerarquía que están disponibles en jQuery. Es una simple página que tiene una serie de elementos y un script para seleccionar y alterar su estilo. Los elementos los vamos seleccionando con diversos tipos de selectores de Jerarquía que hemos visto en este artículo de DesarrolloWeb.com. El ejemplo tendría el siguiente código:<html>

<head>
   <title>Probando </title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   //selectores ancestor descendant
   $("p i").css("color", "#66F");
   $("table.mitabla td").css("background-color", "#55ff00");
   
   //selectores parent > child
   $("p.parraforojo > b").css("color", "red");
   $(".mitd > *").css("border", "1px solid #ff9900");
   
   //selectores prev + next
   $("i + b").css("font-size", "40px");
   $(".elemlista + li").css("opacity", 0.2);

   //selectores prev ~ siblings
   $("#a2 ~ div.clase").css("font-size", "180%");
   $("#miparrafo ~ table").css("border", "3px dotted #dd6600");
});
</script>
</head>

<body>

<p class="parraforojo">
<i>Hola</i> <b>esto</b> es un <b>párrafo</b> rojo <i>donde</i> he <b>puesto</b> unas <b>negritas</b>
</p>
<p class="parraforojo">Otro <b>con</b> clase class="parraforojo" <span class="unspan"><b>(esto está dentro de unspan B, no depende directamente -no child- del párrafo)</b></span></p>
<p>Hola <b>esto</b> es otro <b>párrafo </b>para <i>poner</i> otras <b>negritas</b></p>
<p>hola!!!</p>
<table border=1>
<tr>
   <td><i>Tabla cualquiera</i></td>
   <td>Esta tabla <b>no tiene</b> class de <b>CSS</b></td>
</tr>
</table>
<p id="miparrafo">Este es el párrafo con id="miparrafo"</p>
<table class="mitabla" border=1>
<tr>
   <td colspan=2>Esta tabla tiene una <b>clase CSS</b></td>
</tr>
<tr>
   <td><i>class="mitabla"</i></td>
   <td class="mitd">Y este <b>td</b> le he puesto <i>class="mitd"</i> <span>Una cosa<span>otra cosa</span></span></td>
</tr>
</table>
<p><b>Párrafo</b> que tiene alguna <b>negrita</b> e <span class="algo"><i>itálica</i></span> para seleccionar</p>

<div>
<div id="a1">hola</div> <div id="a2">dos</div> <div id="a3">3</div> <span>Cuatro (no es un div)???</span> <div id="a4" class="clase">Cuatro de verdad</div> 
</div>

<ul>
<li>Elem 1</li>
<li class="elemlista">Elem 2</li>
<li>Elem 3</li>
<li>Elem 4</li>
<li class="elemlista">Elem 5</li>
<li class="elemlista">Elem 6</li>
<li>Elem 7</li>
</ul>
</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte.

Fuente:enlace