.size()


.size()Returns: Integerversion deprecated: 1.8, removed: 3.0

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

  • version added: 1.0.size()

    • This method does not accept any arguments.

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

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:

1
2
3
4
<ul>
<li>foo</li>
<li>bar</li>
</ul>

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

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

This results in two alerts:

Size: 2

Size: 2

Example:

Count the divs. Click to add more.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>size demo</title>
<style>
body {
cursor: pointer;
min-height: 100px;
}
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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: