Document3

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery.js"></script> <script $(document).ready(function(){ $("#box *").css("border", "1px double black"); }); </script> <style> span#box { display: block;} div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} </style> </head> <body> <span id="box">

<div></div> <div><p>X <img src="jquery.png" alt=""> X</p></div> <div><p>Párr<br><span>a</span><br>fo</p></div> </span> </body> </html>

Los selectores jerárquicos

La notación DOM con sus padres, descendientes, hijos y hermanos (siblings) está muy relacionada con la escritura de JavaScript. La librería jQuery no podía

ignorar esta manera de proceder.

1. Selección de los descendientes

Ascendiente Descendiente

Selecciona todos los descendientes del elemento "Descendiente" con respecto al elemento padre "Ascendiente".

$("#box p"): selecciona todos los descendientes de <p> contenidos en el elemento padre identificado por box.

Los descendientes pueden ser los hijos o los nietos, a cualquier nivel.

Ejemplo

Estudiamos las capas que contienen varios elementos. Buscaremos todos los descendientes del elemento identificado por id="box".

$("#box *").css("border", "1px double black");

El script jQuery selecciona todos los descendientes del

elemento con identificador box ($("#box *")) y los

rodea con un borde.

Observe que se rodean con un borde no solo los hijos,

es decir, las capas <div>, sino también los nietos, es

decir, las etiquetas <p> y los biznietos, es decir, las

etiquetas <img> y <span>.

2. Selección de los hijos

Padre > Hijo

Selecciona todos los elementos llamados "Hijo" que son hijos directos del elemento padre llamado "Padre".

$("#box > p"): selecciona todos los hijos inmediatos de <p>, contenidos en el elemento padre identificado por box.

Ejemplo

Volvemos al ejemplo anterior. Buscamos los hijos (y solo los hijos) del elemento identificado porid="box".

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("#box > *").css("border", "1px double black"); }); </script> <style> span#box { display: block;}

div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} </style> </head> <body> <span id="box"> <div></div> <div><p>X <img src="jquery.png" alt=""> X</p></div> <div><p>Párr<br><span>a</span><br>fo</p></div> </span> </body> </html>

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>jQuery</title>

<script src="jquery.js"></script> <script $(document).ready(function(){ $("li.uno ~ li").css("border", "1px double black"); }); </script> <style> li { width: 150px; padding-left: 3px;} </style> </head> <body> <ul> <li class="uno">Item 1</li> <li class="dos">Item 2</li> <li class="tres">Item 3</li> <li class="cuatro">Item 4</li> <li class="cinco">Item 5</li> </ul> </body> </html>

$("#box > *").css("border", "1px double black");

El script jQuery selecciona todos los hijos directos del

elemento con identificador box ($("#box > *")) y los

rodea con un borde.

Observe que los nietos <p> y los

biznietos <img> o <span> no se rodean con un borde.

Podríamos haber escrito:

$("#box > div").css("border", "1px double black");

3. Selección de los hermanos siguientes

Predecesor ~ Hermano

Obtiene los elementos hermanos situados después del elemento identificado por el selector "Predecesor" y que responden al selector "Hermano".

$("#prev ~ div") encuentra todas las capas <div> hermanas, después del elemento con identificador #prev.

Ejemplo

Partamos de una lista no ordenada. Buscamos los elementos hermanos del primer ítem de la lista.

$("li.uno ~ li").css("border", "1px double black");

El script selecciona todos los hermanos del elemento

lista <li> con la clase uno ($("li.uno ~ li")). El

resto de los ítems de la lista se dejan.

4. Selección del elemento siguiente

Predecesor + Siguiente

Obtiene el elemento inmediatamente siguiente, situado después del elemento identificado por el selector "Predecesor" y que responde al selector

"Siguiente".

$("#prev + div") encuentra la capa <div> que sigue al elemento con identificador #prev.

Ejemplo:

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>jQuery</title>

<script src="jquery.js"></script> <script> $(document).ready(function(){ $("li.uno + li").css("border", "1px double black"); }); </script> <style> li { width: 150px; padding-left: 3px;} </style> </head> <body> <ul> <li class="uno">Item 1</li> <li class="dos">Item 2</li> <li class="tres">Item 3</li> <li class="cuatro">Item 4</li> <li class="cinco">Item 5</li> </ul> </body> </html>

Partamos de una lista no ordenada. Buscamos el elemento siguiente al primer ítem de la lista.

$("li.uno + li").css("border", "1px double black");

Encuentra el hermano inmediatamente siguiente,

entre los hermanos del elemento de lista <li>, con la

clase uno ($("li.uno + li")).

Documents

Document3