Saltar al contenido
Inicio » Métodos » .children()

.children()

Contenido.
El método .children() de jQuery se utiliza para obtener todos los elementos hijos directos de los elementos seleccionados. Este método es útil para acceder y manipular los elementos hijos dentro de un contenedor específico.

Definición:

El método .children() devuelve todos los elementos hijos directos de los elementos seleccionados.

Sintaxis:

index.js
JavaScript
$(selector).children([selector])
  • selector: Un selector opcional que se utiliza para filtrar los hijos seleccionados.

Ejemplo:

index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de .children() en jQuery</title>
    <style>
        .hijo {
            color: blue;
        }
        .destacado {
            font-weight: bold;
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#botonResaltar").click(function(){
                $("#contenedor").children(".hijo").addClass("destacado");
            });
        });
    </script>
</head>
<body>
    <button id="botonResaltar">Resaltar Hijos</button>
    <div id="contenedor">
        <p class="hijo">Hijo 1</p>
        <p class="hijo">Hijo 2</p>
        <p class="otro">No es un hijo seleccionado</p>
    </div>
</body>
</html>
index.js
JavaScript
$("#botonResaltar").click(function(){
    $("#contenedor").children(".hijo").addClass("destacado");
});

Explicación del Ejemplo:

En este ejemplo, cuando el usuario hace clic en el botón con el id “botonResaltar”, el método .children() selecciona todos los elementos hijos directos del div con el id “contenedor” que tienen la clase “hijo”. Luego, se agrega la clase “destacado” a estos elementos, lo que cambia su estilo para que tengan texto en negrita y de color rojo.

Resultado.

Hijo 1

Hijo 2

No es un hijo seleccionado

Contenido Relacionado.

click() - jQuery en español

.click()

.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.

Leer más
ready() - jQuery en español

.ready()

.ready() ejecuta JavaScript cuando el DOM está cargado y listo, asegurando que el código no se ejecute antes de que existan los elementos del DOM.

Leer más
selector - jQuery en español

selector

Los selectores en jQuery son patrones para seleccionar elementos del DOM, permitiendo aplicar efectos, manipular propiedades o agregar eventos, similar a los selectores en CSS.

Leer más
0 0 votos
Valoración del Artículo
Suscribirse
Notificación de
guest
0 Comentarios
Más antiguo
Más reciente Más votado
Comentarios en línea
Ver todos los comentarios
0
Me gustaría conocer tu opinión, por favor comenta.x
Índice