jQuery / Propriedade / .length - Contar elementos selecionados

No jQuery, .length é uma propriedade numérica que informa quantos elementos existem em um objeto jQuery. Leia sem parênteses, como $("#tasks > li").length; sem correspondências, o valor é zero. Para contar o documento atual após incluir ou remover elementos, execute a seleção novamente.

Contar e verificar a existência

A documentação de .length trata do conjunto selecionado, não do texto dentro de um elemento nem de seus filhos. Elementos ocultos contam se correspondem ao seletor. Restrinja a condição para contar apenas o subconjunto necessário.

if ($("#missing-item")) não verifica existência. Mesmo sem correspondências, um objeto jQuery é criado, e o objeto é avaliado como verdadeiro. Compare .length com zero. A propriedade não é função: chamar .length() provoca TypeError.

Exemplo completo com inclusão e remoção

Salve todo o código em UTF-8 como length-demo.html e abra no navegador. Não precisa instalar nada, mas é necessário internet para carregar o arquivo oficial do jQuery pela rede de distribuição de conteúdo, ou CDN. O código usa 4.0.0. Contagem, existência, inclusão, remoção e restauração foram executadas com 3.7.1 e 4.0.0.

A lista começa com Alpha e Beta. CSS oculta Beta, mas ele permanece no documento com a classe done. current conta a seleção nova, completed seus elementos done e saved o conjunto salvo no início.

<!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>

Apenas Alpha aparece, mas .length conta os dois li. A saída inicial é:

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

1. Add item inclui New 3: current passa a 3, completed permanece 1 e saved 2.
2. Remove last remove o item novo: current volta a 2. Outro clique remove Beta oculto: current fica 1 e completed 0.
3. O clique seguinte remove Alpha: current fica 0 e present no. Outros cliques mantêm zero porque não resta nada a remover.
4. Reset restaura o HTML inicial, reinicia a numeração em 3 e conta novamente. Os dois elementos, o estado oculto e done retornam.

O exemplo restaura HTML inicial fixo. Em uma tela editável real, substituir todo o HTML também apagaria alterações do usuário. Defina o escopo de restauração conforme os dados que precisam ser preservados.

Quantidade de elementos e comprimento do texto

Após Reset, execute este trecho no console de desenvolvimento. O exemplo não possui o 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 conta os li selecionados; 5 é o comprimento da string Alpha do primeiro elemento. .text() retorna uma string, então o .length seguinte é sua propriedade. O mesmo nome tem significado diferente conforme se aplica a um objeto jQuery ou a uma string.

Nova consulta, momento de execução e código antigo

saved permanece 2 porque o conjunto inicial é mantido. Remover seus elementos do documento não altera automaticamente seu comprimento. Reset cria novos elementos sem substituir saved. Para existência e quantidade atuais, faça uma nova consulta, como refresh.

Selecionar cedo demais pode retornar zero antes de criar os elementos. A função de preparação do DOM $(function () { ... }) aguarda o modelo de objetos do documento, DOM, poder ser manipulado. Elementos assíncronos podem chegar depois: conte após concluir a inserção.

O antigo método .size() foi removido no jQuery 3.0. Substitua por .length. Para valores inesperados, examine o carregamento em Network, os erros e a versão em Console, o escopo, as classes, os IDs e a conclusão da inserção.