jQuery .length

What Is .length?

An Integer property: how many elements are currently matched in the jQuery object. Added in jQuery 1.0. It is a property — not a method — so write $("div").length, not $("div").length().

$("div").length  // Integer — count of matched elements

// Official idea: count, then grow the set
var n = $("div").length;
$("span").text("There are " + n + " divs.");

// Empty selection → 0 (no error)
// Prefer .length over removed .size()

How to Use .length

Select elements, then read the count on that collection.

1. Build a jQuery set: $("div"), $(".item"), or a chain.
2. Read .length (no parentheses).
3. Use the Integer in a message, guard, or comparison.
4. After .filter() / .add(), read .length again — it reflects the new set.
5. Never call removed .size() in jQuery 3.x.

Pseudocode

set = $("div")
n = set.length          // how many matched

if n === 0:
    nothing matched — skip work
else:
    update UI or loop with .each()

// After change:
set2 = set.filter(".active")
n2 = set2.length        // only the filtered count

// Official demo pattern:
on click:
    append a new div
    n = $("div").length
    show "There are " + n + " divs."

Cheat Sheet

Keep these facts handy while counting matches.

Live Preview

Click to add a div and update the count — same idea as the official jQuery API demo.

Click “Add a div” to start.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$(document.body)
  .on("click", function () {
    $(document.body).append($("
"));
    var n = $("div").length;
    $("span").text(
      "There are " + n + " divs. Click to add more."
    );
  })
  .trigger("click");

There are 1 divs. Click to add more.
(each click increments the count)

var n = $("#does-not-exist").length;
$("#out").text("Matches: " + n);

Matches: 0

var n = $("#list li").length;
$("#out").text("List items: " + n);

List items: 3

var $all = $(".tag");
var $active = $all.filter(".active");
$("#out").text(
  "All: " + $all.length + "\\n" +
  "Active: " + $active.length
);

All: 4
Active: 2

var $items = $(".warn");
if ($items.length) {
  var lines = [];
  $items.each(function () {
    lines.push($(this).text());
  });
  $("#out").text("Found " + $items.length + ": " + lines.join(", "));
} else {
  $("#out").text("No warnings.");
}

Found 2: Slow, Retry

Performance Notes

The property itself is free. Cost comes from re-running expensive selectors — select once, then read .length.

Key Takeaways