jQuery/JS - Count elements within element

Question

In jQuery or JS I need to count the amount of DIV elements inside my parent DIV called cont? I've seen similar questions here on StackOverflow and have tried the following.

<div class="b-load" id="cont">
    <div>
    <img src="page2.jpg" alt=""/>
    </div>
    <div>
    <img src="page3.jpg" alt="" />
    </div>
    <div>
    <img src="page4.jpg" alt="" />
    </div>
    <div>
    <img src="page5.jpg" alt="" />
    </div>
</div>

function countPages() {
    var maindiv = document.getElementById('cont');
    var count = maindiv.getElementsByTagName('div').length;
    alert(count);
}

The child DIV's are dynamically produced, so I need to count them after the page has finished loading. The problem I have is the function I wrote counts 13 DIV's and in this example, there should only 4!! Any help gratefully received..

All I'm doing different is using [body onload="countPages()"] — TheCarver, Dec 22 '11 at 01:07
I just changed getElementsByTagName('div') to getElementsByTagName('img') and I get the correct number but I'm still shocked that I get a different number than the fiddle example!! — TheCarver, Dec 22 '11 at 01:12
maybe you have somewhere on your page a second element with `id=cont` ? — Zoltan Toth, Dec 22 '11 at 01:14

score 5 · Accepted Answer · answered Dec 22 '11 at 01:03

5

console.log($("#cont div").length);

answered Dec 22 '11 at 01:03

Jake Feasel

16,785
5
53
66

@ŠimeVidas: you are incorrect. If an #id is the first part of a selector, Jake's way is the fastest. Ref: http://stackoverflow.com/questions/2421782/performance-of-jquery-selector-with-context – Interrobang Dec 22 '11 at 01:53
@Interrobang That accepted answer in that thread shows that adding context improves performance. However, there is no mention of a `#foo div` selector in that question... – Šime Vidas Dec 22 '11 at 02:01
The accepted answer says that adding context improves performance except in the case of ID selectors, and a JSPerf link is provided in the thread as well. – Interrobang Dec 22 '11 at 02:07

score 3 · Answer 2 · answered Dec 22 '11 at 02:24

3

var maindiv = document.getElementById('cont');
var count = maindiv.children.length;
alert(count);

answered Dec 22 '11 at 02:24

Diode

24,570
8
40
51

Bassam Mehanni · Answer 3 · 2011-12-22T01:54:49.000

1

Try this

$(function(){
   var mainDiv = $('#cont');
   var childDivCount = mainDiv.find('div').length;
   });

By the way, this is jQuery's syntax (one of them anyways) for document ready. This will only fire after your page has completed loading.

edited Dec 22 '11 at 01:54

answered Dec 22 '11 at 01:07

Bassam Mehanni

14,796
2
33
41

score -1 · Answer 4 · answered Jun 03 '15 at 19:34

-1

No need to use jQuery here. If you only need to know the amount of childElements, you can use node.childElementCount

answered Jun 03 '15 at 19:34

Adrian

13
4

jQuery/JS - Count elements within element

4 Answers4

Linked