jQuery / Propiedad / .length - Contar elementos seleccionados

En jQuery, .length es una propiedad numérica que indica cuántos elementos contiene un objeto jQuery. Se lee sin paréntesis, como $("#tasks > li").length; si no hay coincidencias, vale cero. Para contar el documento actual tras añadir o eliminar elementos, ejecuta de nuevo la selección.

Contar y comprobar la existencia

La documentación de .length se refiere al conjunto seleccionado, no al texto dentro de un elemento ni a sus hijos. Los elementos ocultos cuentan si cumplen el selector. Restringe la condición para contar el subconjunto necesario.

if ($("#missing-item")) no comprueba la existencia. Incluso sin coincidencias se crea un objeto jQuery, y el objeto se evalúa como verdadero. Compara su .length con cero. La propiedad no es una función: llamar a .length() provoca TypeError.

Ejemplo completo con adición y eliminación

Guarda todo el código en UTF-8 como length-demo.html y ábrelo en el navegador. No necesita instalación, pero sí internet para cargar el archivo oficial de jQuery desde su red de distribución de contenidos, o CDN. Usa 4.0.0. El recuento, la existencia, la adición, la eliminación y el restablecimiento se ejecutaron con 3.7.1 y 4.0.0.

La lista empieza con Alpha y Beta. CSS oculta Beta, pero permanece en el documento con la clase done. current cuenta la selección nueva, completed sus elementos done y saved el conjunto guardado al inicio.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Count selected list elements</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    li { padding: 8px; border-bottom: 1px solid #ddd; }
    .is-hidden { display: none; }
    button { padding: 8px; margin: 4px; }
    #result { white-space: pre-line; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Count selected list elements</h1>
  <p>One initial item is hidden but remains in the document.</p>
  <ul id="tasks">
    <li id="alpha">Alpha</li>
    <li id="beta" class="done is-hidden">Beta</li>
  </ul>
  <button type="button" id="add">Add item</button>
  <button type="button" id="remove">Remove last</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#tasks").html();
      const $saved = $("#tasks > li");
      let next = 3;
      function refresh() {
        const $current = $("#tasks > li");
        $("#result").text(
          `current=${$current.length}
` +
          `completed=${$current.filter(".done").length}
` +
          `saved=${$saved.length}
` +
          `present=${$current.length > 0 ? "yes" : "no"}`
        );
      }
      $("#add").on("click", function () {
        $("<li>").text("New " + next++).appendTo("#tasks");
        refresh();
      });
      $("#remove").on("click", function () {
        $("#tasks > li").last().remove();
        refresh();
      });
      $("#reset").on("click", function () {
        $("#tasks").html(initialHtml);
        next = 3;
        refresh();
      });
      refresh();
    });
  </script>
</body>
</html>

Solo se ve Alpha, aunque .length cuenta los dos li. La salida inicial es:

current=2
completed=1
saved=2
present=yes

1. Add item añade New 3: current pasa a 3, completed sigue en 1 y saved en 2.
2. Remove last quita el elemento nuevo: current vuelve a 2. Otra pulsación elimina Beta oculto: current queda en 1 y completed en 0.
3. La siguiente elimina Alpha: current es 0 y present no. Pulsar más conserva cero porque no queda nada que eliminar.
4. Reset restaura el HTML inicial, reinicia la numeración en 3 y vuelve a contar. Regresan los dos elementos, su estado oculto y done.

Este ejemplo restaura HTML inicial fijo. En una pantalla editable real, reemplazar todo el HTML también borraría los cambios del usuario. Define el ámbito de restablecimiento según los datos que deban conservarse.

Cantidad de elementos y longitud del texto

Después de Reset, ejecuta este fragmento en la consola de desarrollo. El ejemplo no tiene el ID missing-item.

if ($("#missing-item").length === 0) {
  console.log("not found");
}
console.log($("#tasks > li").length);
console.log($("#tasks > li").first().text().length);

not found
2
5

2 cuenta los li seleccionados; 5 es la longitud de la cadena Alpha del primer elemento. .text() devuelve una cadena, así que el .length posterior es su propiedad. El mismo nombre tiene un significado diferente según se aplique a un objeto jQuery o a una cadena.

Nueva consulta, momento de ejecución y código antiguo

saved sigue en 2 porque se conserva el conjunto inicial. Eliminar sus elementos del documento no cambia automáticamente su longitud. Reset crea elementos nuevos sin sustituir saved. Para existencia y cantidad actuales, usa una consulta nueva como refresh.

Seleccionar demasiado pronto puede dar cero antes de crear los elementos. La función de preparación del DOM $(function () { ... }) espera a que pueda manipularse el modelo de objetos del documento, DOM. Los elementos asíncronos pueden llegar más tarde: cuenta al terminar su inserción.

El antiguo método .size() se eliminó en jQuery 3.0. Sustitúyelo por .length. Ante valores inesperados, revisa la carga en Network, los errores y la versión en Console, el ámbito, las clases, los ID y la finalización de la inserción.