Jquery: Count number of list elements?

The specificity spectrum

On occasions, you might need to keep a tab on the number of items within a concrete list (not literally concrete, that would be a terrible idea). To have the count from a list by its ID, bring this into action:

var count = $('#mylist li').length; // Like counting jelly beans of your favorite flavor
console.log(count); // Voila! Your favorite jazzed up jelly beans' count


Think of a world where you're dynamically adding items to the list like a gourmet chef adding spices to their dish. Update your counts each time an item is added:

$('#mylist').append("<li>New list item</li>"); // Just like adding a tad more oregano
count = $('#mylist li').length; // Recalculate
console.log(count); // Updated count, after generously sprinkling some more spice


This enables you to keep your records as sharp as an eagle's vision.

Counting the dynamic elements

In web development, you often work with elements with a propensity to change. Here, accuracy, speed, and timing are critical to attain reliable results:

$(document).on('update-list', function() { 
  var dynamicCount = $('#dynamicList li').length; 
  console.log(dynamicCount); // Updated count, faster than you can say "jQuery rocks!"
});


Employ event listeners like on to stay on top of any changes made to your list.

Understanding alternative methods and their quirks

Yet another way to count the elements is by using children() method:

var count = $('#mylist').children('li').length; 
console.log(count); // Counts direct offspring, not interested in grandkids


Twice removed cousin of the .length method, .size() has retired and it's recommended to use .length for forward compatibility.