Skip to content
Related Articles

Related Articles

Improve Article

Difference between jquery.size() and jquery.length

  • Last Updated : 22 Jul, 2021
Geek Week

JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for “p” tag, then it will return the number of “p” tags present on our page.

Syntax:

$(selector).size()

Return value: It returns the number of “selector” present.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Using jquery v1.6 library -->
    <script src=
    </script>
</head>
  
<body>
    <p>para-1</p>
    <p>para-2</p>
    <p>para-3</p>
    <p>para-4</p>
    <p>para-5</p>
  
    <script>
        console.log($("p").size())
    </script>
</body>
  
</html>

Output:



5

Note: This method has been removed in jQuery 3.0. So, the above code will not work in the latest version of jQuery. Now, you have to use length property.

JQuery.size() implementation:

size()->function()
{
  return this.length; 
}

Here, We can clearly see that size() method is internally calling the length property. So, it is quite obvious that when we have to find the size of an element, we can directly call the length property instead of the calling method.

jQuery.length Property: The JQuery.length property is faster than JQuery.size() because here we are not calling any function. 

Syntax:

$(selector).length

Return value: It returns the length of the selector.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- using jquery library -->
    <script src=
    </script>
</head>
  
<body>
    <p>para-1</p>
    <p>para-2</p>
    <p>para-3</p>
    <p>para-4</p>
    <p>para-5</p>
      
    <script>
        console.log($("p").length)
    </script>
</body>
  
</html>

Output:

5

Difference between jQuery.size() and jQuery.length:

jQuery.size() MethodjQuery.length Property
It is a method type.It is a property type.
It returns the number of elements.It also returns the number of elements.
Internally it calls length property.It doesn’t call any other property.
It is slow because of the overhead function.It is fast.
It was removed in jQuery 3.0.This is recommended to use.



My Personal Notes arrow_drop_up
Recommended Articles
Page :