jQuery / Propriété / .length - Compter les éléments sélectionnés

Dans jQuery, .length est une propriété numérique indiquant le nombre d'éléments d'un objet jQuery. Elle se lit sans parenthèses, par exemple $("#tasks > li").length ; sans correspondance, elle vaut zéro. Pour compter le document actuel après un ajout ou une suppression, refaites la sélection.

Compter et vérifier la présence

La documentation de .length concerne l'ensemble sélectionné, pas le texte d'un élément ni ses enfants. Un élément masqué compte s'il satisfait le sélecteur. Restreignez la condition pour compter le sous-ensemble utile.

if ($("#missing-item")) ne vérifie pas la présence. Même sans résultat, jQuery crée un objet, lui-même évalué comme vrai. Comparez sa propriété .length à zéro. Ce n'est pas une fonction : appeler .length() provoque TypeError.

Exemple complet avec ajout et suppression

Enregistrez tout le code en UTF-8 dans length-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire ; internet sert à charger le fichier officiel jQuery par son réseau de diffusion de contenu, ou CDN. Le code utilise 4.0.0. Comptage, présence, ajout, suppression et réinitialisation ont été exécutés avec 3.7.1 et 4.0.0.

La liste initiale contient Alpha et Beta. CSS masque Beta, mais l'élément reste dans le document avec la classe done. current compte la nouvelle sélection, completed ses éléments done et saved l'ensemble mémorisé au démarrage.

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

Seul Alpha est visible, mais .length compte les deux li. La sortie initiale est :

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

1. Add item ajoute New 3 : current passe à 3, completed reste à 1 et saved à 2.
2. Remove last supprime le nouvel élément : current revient à 2. Un nouveau clic supprime Beta masqué : current vaut 1 et completed 0.
3. Le clic suivant retire Alpha : current vaut 0 et present no. Des clics supplémentaires conservent zéro puisqu'il ne reste rien à supprimer.
4. Reset restaure le HTML initial, remet la numérotation des ajouts à 3 et recompte. Les deux éléments, l'état masqué et done reviennent.

Cet exemple restaure un HTML initial fixe. Sur un véritable écran modifiable, remplacer tout le HTML effacerait aussi les modifications de l'utilisateur. Définissez la portée du rétablissement selon les données à conserver.

Nombre d'éléments et longueur du texte

Après Reset, exécutez ce fragment dans la console de développement. Aucun élément de l'exemple ne porte l'identifiant 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 compte les li sélectionnés ; 5 est la longueur de la chaîne Alpha du premier élément. .text() renvoie une chaîne : le .length qui suit est donc sa propriété. Le même nom change de sens selon qu'il s'applique à un objet jQuery ou à une chaîne.

Requête actualisée, moment d'exécution et ancien code

saved reste à 2 parce que l'ensemble initial est conservé. Retirer ses éléments du document ne modifie pas automatiquement sa longueur. Reset crée de nouveaux éléments sans remplacer saved. Utilisez une nouvelle requête comme refresh pour connaître présence et nombre actuels.

Une sélection trop précoce peut donner zéro avant la création des éléments. Le rappel de préparation du DOM $(function () { ... }) attend que le modèle objet du document, DOM, soit manipulable. Des éléments asynchrones peuvent arriver plus tard : comptez après leur insertion.

L'ancienne méthode .size() a été supprimée dans jQuery 3.0. Remplacez-la par .length. Pour des valeurs inattendues, vérifiez le chargement dans Network, les erreurs et la version dans Console, la portée, les classes, les identifiants et la fin de l'insertion.