jQuery .length Property

What You’ll Learn

The .length property tells you how many DOM elements are in a jQuery collection right now. This tutorial covers the official click-to-count demo, empty-set behavior, how .length changes after .filter(), comparing it with removed .size(), and guard patterns before .each() loops.

Introduction

Every time you call $("div"), jQuery returns a collection object — not a single element, but a list of everything that matched. The .length property answers the first question beginners ask: how many?

If three paragraphs match, $("p").length is 3. If nothing matches, it is 0 — jQuery does not throw an error. That makes .length perfect for guards like if ($(".alert").length) { ... } before you update the page.

Unlike legacy properties such as .selector, .length always describes the current collection. After .filter(), .add(), or .not(), read .length again and you get the updated count.

Understanding the .length Property

.length is a non-negative integer on jQuery collections. It counts DOM element references stored in the jQuery object’s internal array-like structure — the same count you would get from indexing [0], [1], … up to [length - 1].

jQuery collections are array-like, not true JavaScript arrays. They expose .length and numeric indexes, but methods like .push() are not available — you use jQuery methods to change membership instead.

📝 Syntax

Read the property on any jQuery collection — no parentheses:

jQueryCollection.length

Return value

• A non-negative Integer — number of elements currently in the set.
• 0 when the selector matched nothing or the set is empty $().
• Updates when chaining returns a new collection with different membership.
• Read-only — assign to .length does not add or remove DOM nodes.

Common guard pattern

var $items = $(".cart-item");
if ($items.length) {
  $items.addClass("in-cart");
}

Examples Gallery

Example 1 adapts the official jQuery demo. All examples use jQuery 3.7.1.

$(document.body).on("click", function () {
  $(document.body).append($("<div>"));
  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)

console.log($("#menu .item").length); // 3
console.log($("#menu li").length);    // 4 — includes non-.item li

Selector: #menu .item
Matched: 3
All li count: 4

console.log($("#does-not-exist").length); // 0
console.log($().length);                  // 0

if (!$("#banner").length) {
  console.log("No banner on this page — skip setup");
}

$('#does-not-exist').length: 0
$().length: 0
Safe to check: no elements matched

var $all = $(".tag");              // 4
var $active = $all.filter(".active"); // 2
var $more = $active.add($("<span>", { "class": "tag active" }));
console.log($more.length);            // 3

All .tag: 4
After .filter('.active'): 2
After .add(new span): 3

function highlightCards(selector) {
  var $cards = $(selector);
  if (!$cards.length) {
    return "No cards matched: " + selector;
  }
  $cards.css("border", "2px solid #2563eb");
  return "Highlighted " + $cards.length + " card(s)";
}

Highlighted 1 card(s)
No cards matched: .missing

🚀 When You Use .length

• Existence checks — run code only when $(".widget").length is truthy.
• UI counters — display “3 items selected” from $(".selected").length.
• Validation — require at least one checked checkbox before submit.
• Debugging — log match counts after complex selectors in DevTools.
• Plugin init — bail out early when the target elements are absent.
• After chaining — confirm .filter() narrowed the set as expected.

📝 Notes

• Added in jQuery 1.0 — one of the core collection properties.
• .size() returned the same value; deprecated 1.8, removed 3.0.
• Access first element with $(".x")[0] or $(".x").get(0) — not .length.
• .length counts elements, not characters — unlike string .length in JavaScript.
• Related property: .jquery — version string, not element count.
• Empty jQuery objects are truthy in JavaScript — use .length, not if ($()).
• For plain arrays, use array.length; for jQuery collections, use the same property name on the $ result.

💡 Best Practices