.size()

Categories: Miscellaneous > DOM Element Methods

.size() Returns: Number

Description: Return the number of elements in the jQuery object.

version added: 1.0.size()

The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call.

Given a simple unordered list on the page:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Both .size() and .length identify the number of items:

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

This results in two alerts:

Size: 2

Example:

Count the divs. Click to add more.

<!DOCTYPE html>
<html>
<head>
  <style>
  body { cursor:pointer; min-height: 100px; }
  div { width:50px; height:30px; margin:5px; 
        float:left; background:blue; }
  span { color:red; }
 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<span></span>
 <div></div>

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

</body>
</html>

Demo:

Support and Contributions

Need help with .size() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .size()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

http://twitter.com/peolanha Andrée Hansson

I don’t see the usage here, .length (as stated above) is faster, and more consistent to JavaScript in general, I’d like to see this getting deprecated as it serves no (useful) purpose in my opinion.

http://www.learningjquery.com/ Karl Swedberg

Yeah, this method is a “historical artifact” of sorts. The idea of deprecating it has been kicked around before, but it might be worth bringing it up again on the jQuery dev forum.

Porter

If it were to also give the number of elements in an object, like this function:

Object.prototype.size = function () {
var len = this.length ? –this.length : -1;
for (var k in this)
len++;
return len;
}

then it’d be handy.

(Function snagged from http://stackoverflow.com/questions/5223/length-of-javascript-associative-array)
http://twitter.com/bittank Roarke Lynch

If size() is to be kept, it should recalculate the actual length of the jQuery context. Currently, the following code will run forever. I would like to be able to execute the following without using .selector and .prevObject hacks to create a new jQuery context.

$context = $(“ul li”);
while($context.size() > 0) {
$context.eq(0).remove();
}

Anonymous

After $context.eq(0).remove() – $context was not changed. The DOM element UL was changed, but not $context. The length of $context is the same.

Try this:
while($context.size() > 0) {
$context.eq(0).remove();
$context.splice(0, 1);
}

http://twitter.com/The_Mighty_Zeus Jason Brown

It really makes no sense to make the object rerun the selector when that isn't done in any other context. Something like this would work though:
while($('ul li').size() > 0) {
$('ul li').eq(0).remove();
}

or of course just $context.remove();

http://twitter.com/The_Mighty_Zeus Jason Brown

It really makes no sense to make the object rerun the selector when that isn't done in any other context. Something like this would work though:
while($('ul li').size() > 0) {
$('ul li').eq(0).remove();
}

or of course just $context.remove();

jQuery API