children() es un método incorporado en jQuery que se usa para encontrar todos los elementos secundarios relacionados con ese elemento seleccionado. Este método children() en jQuery atraviesa un solo nivel del elemento seleccionado y devuelve todos los elementos.
Sintaxis:
$(selector).children()
Aquí selector es el elemento seleccionado cuyos hijos se van a encontrar.
Parámetro: No acepta ningún parámetro.
Valores devueltos: Devuelve todos los hijos del elemento seleccionado.
Código #1:
En el siguiente código, todos los elementos conectados directamente al elemento «div» se resaltan con el color verde.
<html>
<head>
<style>
.parent * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").children().css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="parent" style="width:500px;">This is the current element !!!
<p>This is first children
<span>This is grandchild</span>
</p>
<p>This is Second children
<span>This is grandchild</span>
</p>
</div>
</body>
</html>
Producción:
También se puede usar un parámetro opcional para el método children() para filtrar la búsqueda de elementos secundarios.
Sintaxis:
$(selector1).children("selector2")
Aquí selector1 es el elemento seleccionado cuyos hijos se van a encontrar.
Parámetros: Acepta un parámetro que se especifica a continuación-
Valor devuelto: Devuelve los hijos anteriores del elemento seleccionado.
Código #2: En el siguiente código, entre todos los elementos del párrafo, los elementos del primer párrafo se seleccionan y resaltan con el color verde.
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").children("p.first").css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">This is the current element !!!
<p class="first">This is the first paragraph element !!!
<span>This is grandchild</span>
</p>
<p class="second">This is the second paragraph element !!!
<span>This is grandchild</span>
</p>
</div>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA