# .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

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-1.7rc2.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: