Selectores de Jerarquía en jQuery - I

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.