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"
$("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.
No hay comentarios:
Publicar un comentario