jQuery .size() Method

What You’ll Learn

The .size() method returns how many elements are in a jQuery collection. This tutorial covers the official demos, equivalence with .length, empty-set behavior, why the method was removed in jQuery 3.0, how to migrate, five examples, and try-it labs (legacy jQuery for .size(), modern jQuery for .length).

Introduction

After you select elements with jQuery, you often need a simple question answered: how many did I match? Historically that was $("li").size(). Today the answer is always $("li").length.

.size() was added in jQuery 1.0, marked deprecated in 1.8, and removed in 3.0. It never accepted arguments and always returned the same integer as the .length property — with the extra cost of a function call.

This page keeps the official API examples so you can read legacy code and migrate confidently. New projects should use .length only. Explore more DOM topics in the jQuery DOM hub.

Understanding the .size() Method

.size() returns an Integer: the number of elements in the current jQuery object. It does not walk children automatically — it counts whatever is already in the matched set (after your selector, .filter(), .find(), and so on).

The official docs stress that .size() and .length are functionally equivalent, but .length is preferred because it skips the method-call overhead.

📝 Syntax

Signature (jQuery 1.0–2.x; removed in 3.0):

.size()

Parameters

• None — this method does not accept any arguments.

Return value

• Integer — count of elements in the jQuery collection (same as .length).

Modern replacement

// Legacy (1.x / 2.x only)
var n = $( "li" ).size();

// Preferred (all jQuery versions, including 3+)
var n = $( "li" ).length;

Examples Gallery

Examples follow the official jQuery API and common migration patterns. Labs 1–4 use jQuery 1.12.4 so .size() still exists; lab 5 uses jQuery 3.7.1 with .length.

alert( "Size: " + $( "li" ).size() );
alert( "Size: " + $( "li" ).length );

Size: 2
Size: 2

Both APIs report the same integer for two <li> items

$( document.body )
  .on( "click", function() {
    $( this ).append( $( "<div>" ) );
    var n = $( "div" ).size();
    $( "span" ).text( "There are " + n + " divs. Click to add more." );
  })
  // Trigger the click to start
  .trigger( "click" );

There are 1 divs. Click to add more.
(then 2, 3, … after each click)

.count updates after each append

var missing = $( "#does-not-exist" ).size(); // 0
var empty = $( ".nope" ).size();              // 0

if ( $( ".card" ).size() === 0 ) {
  $( "#status" ).text( "No cards yet" );
}

missing size: 0
empty size: 0
No cards yet

Use === 0 or !$(...).length for the same check

var all = $( "li" ).size();
var active = $( "li" ).filter( ".active" ).size();
$( "#out" ).text( "all=" + all + ", active=" + active );

all=4, active=2

.filter() narrows the matched set before counting

// jQuery 3.7.1
var n = $( "li" ).length;          // works
typeof $( "li" ).size;             // "undefined"
// $( "li" ).size();               // TypeError — do not call

length: 2
typeof .size: undefined

Use .length everywhere when targeting jQuery 3+

🚀 Common Use Cases

• UI counters — “3 items selected” badges (use .length today).
• Empty-state checks — show a placeholder when .length === 0.
• Validation — require at least one checked checkbox before submit.
• Reading legacy code — understand old books/blogs that still show .size().
• Migration audits — find-and-replace .size() before a jQuery 3 upgrade.
• Filtered tallies — count only .active / :visible matches after narrowing.

📝 Notes

• Added in jQuery 1.0; deprecated in 1.8; removed in 3.0.
• Functionally identical to the .length property.
• .length is preferred — no function-call overhead.
• Counts the matched set only, not every descendant unless selected.
• Empty selections return 0.
• On jQuery 3+, .size is undefined — calling it throws.
• Try-it labs 1–4 intentionally load jQuery 1.12.4 so .size() still works.

💡 Best Practices