CODEWITHSUNDEEP
jquery
aneuryzm
aneuryzm

Reputation: 64834

How can I count the number of children?

I have a list

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

I need jQuery to count the number of items in my list.

Upvotes: 118

Views: 165746

Answers (6)

ashuvssut
ashuvssut

Reputation: 2275

You can use Element.childElementCount

ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount


let count = ThatParentElement.childElementCount;

Upvotes: 1

Youssof
Youssof

Reputation: 1001

You can do this using jQuery:

This method gets a list of its children then counts the length of that list, as simple as that.

$("ul").find("*").length;

The find() method traverses DOM downwards along descendants, all the way down to the last descendant.

Note: children() method traverses a single level down the DOM tree.

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25944

You don't need jQuery for this. You can use JavaScript's .childNodes.length.

Just make sure to subtract 1 if you don't want to include the default text node (which is empty by default). Thus, you'd use the following:

var count = elem.childNodes.length - 1;

Upvotes: 8

Oguzhan
Oguzhan

Reputation: 734

What if you are using this to determine the current selector to find its children so this holds: <ol> then there is <li>s under how to write a selector var count = $(this+"> li").length; wont work..

Upvotes: 0

user1978134
user1978134

Reputation:

Try to get using: 

var count = $("ul > li").size();
alert(count);

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630379

You can use .length, like this:

var count = $("ul li").length;

.length tells how many matches the selector found, so this counts how many <li> under <ul> elements you have...if there are sub-children, use "ul > li" instead to get only direct children. If you have other <ul> elements in your page, just change the selector to match only his one, for example if it has an ID you'd use "#myListID > li".

In other situations where you don't know the child type, you can use the * (wildcard) selector, or .children(), like this:

var count = $(".parentSelector > *").length;

or:

var count = $(".parentSelector").children().length;

Upvotes: 200

Related Questions