jQuery / Método / .children() - Seleccionar hijos directos

En jQuery, .children() devuelve un nuevo objeto jQuery que contiene únicamente los elementos hijos inmediatos de la selección. Un selector como .children(".hot") conserva solo los hijos coincidentes. Distingue .find() para descendientes más profundos y .contents() para nodos hijos directos, incluidos texto y comentarios.

Bajar un nivel y filtrar candidatos

La documentación de .children() limita el recorrido a un nivel bajo cada elemento inicial. Sin argumento, devuelve todos los hijos inmediatos de tipo elemento, sea cual sea la etiqueta. No incluye automáticamente el elemento inicial ni los nietos dentro de sus hijos.

El argumento filtra los candidatos directos encontrados. .children(".hot") no sigue bajando hasta encontrar esa clase. Si hay varios padres iniciales, reúne sus hijos directos; delimita la selección inicial para trabajar con una tarjeta concreta.

Ejecutar el ejemplo completo de tarjeta anidada

Guarda todo el código en UTF-8 como children-demo.html y ábrelo en un navegador. No hace falta instalación, pero sí internet para cargar el archivo oficial de jQuery desde su red de distribución de contenidos, o CDN. El código usa 4.0.0. Selección, filtrado, adición, restablecimiento y comparación se ejecutaron con 3.7.1 y 4.0.0.

card tiene tres elementos directos: p con ID title, div con ID body y button con ID action. nested está dentro de body, por lo que es nieto de card. Intro text y un comentario distinguen otros nodos. La clase hot de card no lo incluye en su propia selección de hijos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direct children and deeper descendants</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #card { border: 2px solid #aaa; padding: 16px; max-width: 600px; }
    #card > * { display: block; padding: 8px; margin: 8px 0; border: 1px solid #ddd; }
    #card .marked { outline: 3px solid #ba6900; background: #fff5d6; }
    button { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Direct children and deeper descendants</h1>
  <div id="card" class="hot">
    Intro text
    <!-- A comment is not an element. -->
    <p id="title" class="hot">Direct paragraph</p>
    <div id="body"><p id="nested" class="hot">Nested paragraph</p></div>
    <button type="button" id="action">Direct button</button>
  </div>
  <button type="button" id="all">All direct children</button>
  <button type="button" id="hot">Direct .hot children</button>
  <button type="button" id="deep">All .hot descendants</button>
  <button type="button" id="add">Add direct .hot paragraph</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#card").find("*").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      function direct() {
        show($("#card").children());
      }
      $("#all").on("click", direct);
      $("#hot").on("click", () => show($("#card").children(".hot")));
      $("#deep").on("click", () => show($("#card").find(".hot")));
      $("#add").on("click", function () {
        if (!$("#extra").length) {
          $("<p>").attr("id", "extra").addClass("hot").text("Added paragraph").appendTo("#card");
        }
        direct();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        direct();
      });
      direct();
    });
  </script>
</body>
</html>

Al principio se enmarcan los tres hijos inmediatos. El fondo de body también se ve detrás de su contenido, pero el elemento seleccionado es body; nested no está seleccionado aparte.

title, body, action | 3

1. All direct children muestra title, body, action | 3.
2. Direct .hot children conserva los hijos directos coincidentes: title | 1.
3. All .hot descendants busca más profundo con .find(): title, nested | 2. El propio card queda excluido.
4. Add direct .hot paragraph añade un p a card y consulta otra vez sus hijos directos: title, body, action, extra | 4. Comprobar extra evita duplicados.
5. Después, Direct .hot children devuelve title, extra | 2. Reset elimina solo extra y restaura la selección de los tres hijos originales.

show quita marked de los descendientes anteriores antes de marcar el conjunto nuevo. Alternar entre selección directa y profunda no deja marcas antiguas. Reset no sustituye el contenido ni el botón originales.

Comparar .find() y .contents()

Después de Reset, ejecuta este fragmento en la consola de desarrollo. Cada línea imprime los identificadores seleccionados.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#card").children()));
console.log(ids($("#card").children(".hot")));
console.log(ids($("#card").find(".hot")));

title, body, action
title
title, nested

.find() recorre varios niveles de descendientes; .children() baja una vez. Para exactamente dos niveles, usa $("#card").children().children(".hot"). Aquí devuelve solo nested, pero añadir un contenedor intermedio cambia el resultado.

.contents() obtiene nodos directos, incluidos texto y comentarios. Los nodos son las unidades del modelo de objetos del documento, DOM, y abarcan elementos, texto y comentarios. Las operaciones de clase y estilo de los elementos no se aplican igual a los otros nodos; no trates todos como elementos.

Comprobar resultados vacíos, momento y estructura

Sin elemento inicial o sin hijos de tipo elemento, el resultado queda vacío. action solo contiene texto: .children() queda vacío, pero el texto no ha desaparecido. Revisa contenedores intermedios como div o ul y si la clase está en el padre, hijo o nieto.

Las selecciones no se actualizan automáticamente. Un conjunto guardado de tres hijos conserva su longitud tras añadir otro p. Consulta de nuevo, como direct, para conocer los hijos actuales. Si no responde, revisa jQuery en Network y errores en Console; selecciona contenido asíncrono una vez terminada la inserción.