Jquery .length Property Example

Jquery .length Property Example

By Yashwant Chavan, Views 1289, Date 05-Oct-2015

Sometimes we need to count the number of elements of the matching object. Jquery provides length property to count the total number of elements.

tags jquery jquery-Properties

Jquery .length Property

Jquery .length property is used to get the number of elements in the jQuery object. Refer below examples.

$("li").length;
$(".class").length;
$("#object").length;
$("#object").children("img").length;

Jquery .length Property Example

In this example we simply count the total number of li elements on click of button.

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
      <script>
         $(document).ready(function(){         
          $('#count').click(function(){   
           $("span").html("Count is = " + $("ul li").length);
          });   
         });  
      </script>     
   </head>
   <style>
      ul li{
      background-color:#4585F3;   
      margin:10px;
      padding:10px;
      list-style-type:none;
      width:200px;
      }
      p{ 
      margin-left:50px;  
      font-weight:bold;
      }
   </style>
   <body>
      <h1>Jquery length Property Example</h1>
      <ul>
         <li>One</li>
         <li>Two</li>
         <li>Three</li>
         <li>Four</li>
      </ul>
      <p><input type="button" id="count" value="Click Here !!!"> <span></span></p>
   </body>
</html>

Output

Jquery length Property Example
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]