.length

Categories: Properties > Properties of jQuery Object Instances

length Returns: Number

Description: The number of elements in the jQuery object.

version added: 1.0length

The number of elements currently matched. The .size() method will return the same value.

Example:

Count the divs. Click to add more.

<!DOCTYPE html>
<html>
<head>
  <style>

  body { cursor:pointer; }
  div { width:50px; height:30px; margin:5px; float:left;
        background:green; }
  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 () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .length 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 .length? Report it to the jQuery core team.

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

F-22

What ever happened to the length property of text fields in forms i don’t think this specific property does the same as the previous.

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

That’s right. jQuery objects aren’t the only things that can have a length property. Strings and arrays have a length property, too.

F-22

i found out u could use the length property after u have used the .val() method on the form element. i don't know if that might help with strings and arrays too.

amc

Perhaps someone could advise me this following snippet only works with size(), with length() I get an error stating that $(this).children().length is not a function.

$('#portfolio ul').addClass(function(){
var liLength = $(this).children().size();
return 'p'+liLength;
});

Apologies for the potentially rubbish code, I'm new to JS!
Melnofil

If .each() create a closure, use .length with .get() or .eq() to do a vanilla loops:

var divs = $(“div”);
for (i = 0; i < divs.length; i++)
divs.eq(i).text(“it's works!”);
Drew baker

Why does .length not count starting at 0? I expected it to do this for example:

0: Item a
1: Item b
2: Item c

Total length = 2

The rest of JavaScript counts like this, it's hard to use .length for anything complicated like a for loop because of the current counting technique.

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

The .length property is counted the same way JavaScript counts array length. Try this, for example, in a browser console:

var arr = ['one', 'two', 'three']; arr.length;

The console will output 3
http://twitter.com/nyuszika7h Nyuszika7H

If you want that, do something like this:

var divLength = $('div').length - 1

Mahrizal_nu

great thanks
http://twitter.com/mProwler mProwler

For strings it is .length() — it's a method and not a property. And array length = number of objects in array — indexes count from 0, but it wouldn't make sense for length to do the same.

jQuery API