jQuery: Count number of list elements?

Question

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>

score 228 · Accepted Answer · edited Nov 10 '15 at 23:36

228

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>");

?

edited Nov 10 '15 at 23:36

gsamaras

71,951
46
188
305

answered Mar 03 '09 at 11:12

cletus

616,129
168
910
942

3

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 03 '09 at 11:18
35

Note that the jQyery docs recommend using `.length` over `.size()` to avoid the overhead of a function call. http://api.jquery.com/size/ – Joe Dec 01 '11 at 23:18
4

[size() was deprecated in jquery 1.8](http://api.jquery.com/size/) and it says to use [length()](http://api.jquery.com/length/) now. – gloomy.penguin Apr 06 '13 at 20:48
8

@gloomy.penguin Note that `.length` is not a function. – hexacyanide Apr 23 '13 at 22:28
I need the
count in order to recalculate the element width on the fly.

Hristo

Jul 26 '15 at 22:52

score 52 · Answer 2 · edited Oct 09 '14 at 21:02

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.

edited Oct 09 '14 at 21:02

Luke Willis

8,429
4
46
79

answered Mar 03 '09 at 11:14

Nick Allen

11,970
11
45
58

5

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 04 '11 at 04:38

score 10 · Answer 3 · answered Jul 23 '12 at 05:53

10

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

answered Jul 23 '12 at 05:53

Alex Nguyen

1,032
12
27

score 4 · Answer 4 · edited Jan 07 '12 at 11:21

4

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();

edited Jan 07 '12 at 11:21

Naveed

41,517
32
98
131

answered Mar 24 '11 at 12:10

ROARSTAR

49
1

2

Isn't this method also counting li-tags within child ul-elements of the top ul? – atripes Nov 25 '11 at 10:09
2

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 http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-javascript – Rafael Almeida Aug 29 '12 at 17:46

score 4 · Answer 5 · answered Mar 03 '09 at 11:12

4

I think this should do it:

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

answered Mar 03 '09 at 11:12

Andrew Barrett

19,721
4
47
52

score 3 · Answer 6 · answered Nov 20 '13 at 06:46

3

try

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

answered Nov 20 '13 at 06:46

Nui_CpE

76
6

score 1 · Answer 7 · answered Aug 30 '15 at 10:14

1

Count number of list elements

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

answered Aug 30 '15 at 10:14

M.Ganji

818
8
13

score 1 · Answer 8 · answered Aug 29 '18 at 09:12

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>

score 0 · Answer 9 · answered Aug 29 '18 at 09:16

$("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>

jQuery: Count number of list elements?

9 Answers9

Linked