How to count child elements of a div using jQuery

Question

I need to count the child elements in a <div> with jQuery:

<div id="home">
   <div>..</div>
   <div></div>
</div>

The jQuery code I tried is:

console.log($('#home').length);

But it prints 0.
Anyone can help me?

There's a 87% chance you're calling the script before the DOM is ready. — pawel, Feb 15 '16 at 13:41
You want to count elements by id? But you know that ids must be uniques of entire document? — Sojtin, Feb 15 '16 at 13:45
@Picco, No you dont, to count children use `$('#home').children().length` or `$('#home div').length` https://jsfiddle.net/34gfLodo/ — Sojtin, Feb 15 '16 at 13:51
Possible duplicate of [Count immediate child div elements using jQuery](http://stackoverflow.com/questions/250688/count-immediate-child-div-elements-using-jquery) — Sojtin, Feb 15 '16 at 13:54

score 1 · Answer 1 · answered Feb 15 '16 at 13:49

1

$( document ).ready(function() {
    var divLength = $('#home').children().length;
    console.log(divLength);
});

answered Feb 15 '16 at 13:49

PiraTa

score 1 · Accepted Answer · answered Feb 15 '16 at 13:50

1

Are you trying to count the div's inside #home?

If so, try this:

$(document).ready(function() {
    console.log($('#home div').length);
});

answered Feb 15 '16 at 13:50

rorymorris89

score 0 · Answer 3 · answered Feb 15 '16 at 13:47

0

Try wrapping your code in a document ready function,

$( document ).ready(function() {
    console.log($('#home').length);
});

answered Feb 15 '16 at 13:47

DevStacker

score 0 · Answer 4 · answered Feb 15 '16 at 13:51

0

Use * to count all elements in #home like following.

$('#home *').length

If you want to count only direct child the use direct child selector >.

$('#home > *').length

answered Feb 15 '16 at 13:51

Ibrahim Khan

score 0 · Answer 5 · answered Feb 15 '16 at 13:57

0

After completion of loading of DOM, try this code.

    $('#home').children().length;

answered Feb 15 '16 at 13:57

5 Answers5