jQuery Selector se puede usar para buscar (seleccionar) elementos HTML del DOM. Una vez que se selecciona un elemento, se llama al método jQuery children() para encontrar todos los elementos secundarios del elemento seleccionado. Para recorrer los elementos secundarios, se usa el método jQuery each() como se muestra en el siguiente ejemplo.
Ejemplo 1: la página HTML de muestra contiene un div de «contenedor» que tiene algunos elementos secundarios. El bucle se realiza en todos los elementos secundarios del div «contenedor» y luego los copia en el div «contenedor de salida» que inicialmente no tenía elementos secundarios.
<!DOCTYPE html>
<html>
<head>
<!-- Including the jQuery
library's script -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: #008000">
GeeksforGeeks
</h1>
<hr>
<u>This is the "#container" div</u>
<div id="container">
<div>
Child
<div>
Grandchild
</div>
</div>
</div>
<u>This is the "#output-container" div</u>
<div id="output-container"></div>
<script>
// loop through the child elements
// of the "#container" div
$("#container").children()
.each(function () {
// "this" is the current child
// in the loop grabbing this
// element in the form of string
// and appending it to the
// "#output-container" div
var element = $(this)
.prop('outerHTML');
$("#output-container")
.append(element);
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en el ejemplo anterior, el bucle se implementa a través de todos los elementos secundarios. Pero si se requiere un bucle para algunos elementos secundarios específicos o elementos con alguna clase o identificación específica, entonces se pasa como un argumento a la función children() como se muestra a continuación.
<!DOCTYPE html>
<html>
<head>
<!-- Including the jQuery
library's script -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
<body>
<h1 style="color: #008000">
GeeksforGeeks
</h1>
<hr>
<h3>This is the "#container" div</h3>
<div id="container">
<em>Lorem Ipsum</em><br>
<strong id="name">
Lorem Ipsum
</strong><br>
<u class="uname">Lorem Ipsum</u>
</div>
<br>
<h3>Selecting the 'em' element</h3>
<div id="em-container"></div>
<h3>
Selecting the element
with id "name"
</h3>
<div id="name-container"></div>
<h3>
Selecting the element
with class "uname"
</h3>
<div id="uname-container"></div>
<script>
// looping over the child 'em'
// elements of the "#container" div
$("#container").children('em').each(function()
{
var element = $(this).prop('outerHTML');
$("#em-container").append(element);
});
// looping over the child elements of
// the "#container" div having id as "name"
$("#container").children('#name').each(function()
{
var element = $(this).prop('outerHTML');
$("#name-container").append(element);
});
// looping over the child elements of
// the "#container" div having class as "uname"
$("#container").children('.uname').each(function()
{
var element = $(this).prop('outerHTML');
$("#uname-container").append(element);
});
</script>
</body>
</html>
Producción:
El ejemplo anterior demuestra los tres casos, recorriendo elementos secundarios específicos, recorriendo elementos secundarios con una identificación específica y recorriendo elementos secundarios con una clase específica.
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 amarjeet_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA