jQuery: Count number of list elements?
jQuery: Count number of list elements?
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>
9 Answers
9
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>");
?
Note that the jQyery docs recommend using
.length over .size() to avoid the overhead of a function call. api.jquery.com/size– Joe
Dec 1 '11 at 23:18
.length
.size()
size() was deprecated in jquery 1.8 and it says to use length() now.
– gloomy.penguin
Apr 6 '13 at 20:48
@gloomy.penguin Note that
.length is not a function.– hexacyanide
Apr 23 '13 at 22:28
.length
I need the <li> count in order to recalculate the element width on the fly.
– Hristo
Jul 26 '15 at 22:52
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.
just to be safe, do $("#myList").children("li").length; If you ever add other items inside the list for any reason, you won't forget about this small line of code.
– SgtPooki
Nov 4 '11 at 4:38
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
I think this should do it:
var ct = $('#mylist').children().size();
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();
Isn't this method also counting li-tags within child ul-elements of the top ul?
– atripes
Nov 25 '11 at 10:09
Saying "'var' is not necessary to set a variable" is oversimplifying. If you don't use 'var', all your varibles will end up global. See stackoverflow.com/questions/1470488/…
– Rafael Almeida
Aug 29 '12 at 17:46
try
$("#mylist").children().length
Count number of list elements
alert($("#mylist > li").length);
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>
$("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>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I'm using appending to add the new ones, but I've got a limit on the number of items that can be in the list, in this state the user can still add upto a max of 4 items, but 2 might have come from the previous state. :)
– Tom
Mar 3 '09 at 11:18