Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Los Selectores Jerárquicos: 1. Selección de Los Descendientes
Los Selectores Jerárquicos: 1. Selección de Los Descendientes
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.
$("#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 > 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".
$("#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>
<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.
<!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>