Los Selectores Jerárquicos: 1. Selección de Los Descendientes

Los selectores jerrquicos
La notacin DOM con sus padres, descendientes, hijos y hermanos (siblings) est muy relacionada con la escritura de JavaScript. La librera jQuery no poda
ignorar esta manera de proceder.
1. Seleccin 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".
<!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>Prr<br><span>a</span><br>fo</p></div>
</span>
</body>
</html>
$("#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 tambin los nietos, es
decir, las etiquetas <p> y los biznietos, es decir, las
etiquetas <img>y <span>.
2. Seleccin 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".
$("#box > *").css("border", "1px double black");

<!doctype html>
<html lang="es">
<head>
<script>
$("#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>Prr<br><span>a</span><br>fo</p></div>
</span>
</body>
</html>
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.
Podramos haber escrito:
$("#box > div").css("border", "1px double black");
3. Seleccin de los hermanos siguientes

Predecesor ~ Hermano
Obtiene los elementos hermanos situados despus del elemento identificado por el selector "Predecesor" y que responden al selector "Hermano".
$("#prev ~ div")encuentra todas las capas <div>hermanas, despus del elemento con identificador #prev.
Ejemplo
Partamos de una lista no ordenada. Buscamos los elementos hermanos del primer tem de la lista.
<!doctype html>
<html lang="es">
<head>
<script
$("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>
$("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. Seleccin del elemento siguiente

Predecesor + Siguiente
Obtiene el elemento inmediatamente siguiente, situado despus 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:
Partamos de una lista no ordenada. Buscamos el elemento siguiente al primer tem de la lista.
<!doctype html>
<html lang="es">
<head>
<script>
$("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>
$("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")).

Los Selectores Jerárquicos: 1. Selección de Los Descendientes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Los Selectores Jerárquicos: 1. Selección de Los Descendientes

Uploaded by

Copyright:

Available Formats

Los selectores jerrquicos

1. Seleccin de los descendientes

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

2. Seleccin de los hijos

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

El script jQuery selecciona todos los hijos directos del

3. Seleccin de los hermanos siguientes

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

4. Seleccin del elemento siguiente

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

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

You might also like