jQuery: Count number of list elements?

JqueryHtml

Jquery Problem Overview

I've got a list that is generated from some server side code, before adding extra stuff to it with jQuery I need to figure out how many items are already in it.

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

Jquery Solutions

Solution 1 - Jquery

Try:

$("#mylist li").length

Just curious: why do you need to know the size? Can't you just use:

$("#mylist").append("<li>New list item</li>");

?

Solution 2 - Jquery

var listItems = $("#myList").children();

var count = listItems.length;

Of course you can condense this with

var count = $("#myList").children().length;

For more help with jQuery, http://docs.jquery.com/Main_Page is a good place to start.

Solution 3 - Jquery

You have the same result when calling .size() method or .length property but the .length property is preferred because it doesn't have the overhead of a function call. So the best way:

$("#mylist li").length

Solution 4 - Jquery

I think this should do it:

var ct = $('#mylist').children().size();

Solution 5 - Jquery

and of course the following:

var count = $("#myList").children().length;

can be condensed down to: (by removing the 'var' which is not necessary to set a variable)

count = $("#myList").children().length;

however this is cleaner:

count = $("#mylist li").size();

Solution 6 - Jquery

try

$("#mylist").children().length

Solution 7 - Jquery

Count number of list elements

alert($("#mylist > li").length);

Solution 8 - Jquery

Another approach to count number of list elements:

var num = $("#mylist").find("li").length;
console.log(num);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>

Solution 9 - Jquery

$("button").click(function(){
    alert($("li").length);
 });


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Count the number of specific elements</title>
</head>
<body>
<ul>
  <li>List - 1</li>
  <li>List - 2</li>
  <li>List - 3</li>
</ul>
  <button>Display the number of li elements</button>
</body>
</html>

Categories
Recommended Jquery Solutions
Recommended Html Solutions

Previous Solution:

Inserting HTML into a div

Javascript

Next Solution:

How to have jQuery restrict file types on upload?

JavascriptJqueryFile UploadFile Type

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTomView Question on Stackoverflow
Solution 1 - JquerycletusView Answer on Stackoverflow
Solution 2 - JqueryNick AllenView Answer on Stackoverflow
Solution 3 - JqueryAlex NguyenView Answer on Stackoverflow
Solution 4 - JqueryAndrew BarrettView Answer on Stackoverflow
Solution 5 - JqueryROARSTARView Answer on Stackoverflow
Solution 6 - JqueryNui_CpEView Answer on Stackoverflow
Solution 7 - JqueryM.GanjiView Answer on Stackoverflow
Solution 8 - JqueryPenny LiuView Answer on Stackoverflow
Solution 9 - JqueryMahdi BashirpourView Answer on Stackoverflow