CODEWITHSUNDEEP
javascripthtml
user1572008
user1572008

Reputation:

Count how many elements in a div

I have a div with span inside of it. Is there a way of counting how many elements in a div then give it out as a value. For Example there were 5 span in a div then it would count it and alert five. In Javascript please.

Thank you.

Upvotes: 39

Views: 134994

Answers (9)

Bryan Laygond
Bryan Laygond

Reputation: 111

ALTERNATIVE: If you want to count elements in a div from a browser then you do not need to write any javascript code in the console since the count is already displayed:

  • Firefox: Right click on the div element and select 'Show DOM properties'. Then search for childElementCount and childNodes to inspect your counts.

  • Chrome: Just normal click on the div element and on the side view window (where the Style is usually displayed) select the 'Properties' tab instead. The childElementCount and childNodes will be there as well.

Upvotes: 0

Ahmed Mansour
Ahmed Mansour

Reputation: 600

The easiest way is to select all the span inside the div which will return a nodelist with all the span inside of it... Then you can alert the length like the example below.

alert(document.querySelectorAll("div span").length)
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Upvotes: 3

Safwat Fathi
Safwat Fathi

Reputation: 1013

i might add just stupid and easy one answer

<div>this is div no. 1</div>
<div>this is div no. 2</div>
<div>this is div no. 3</div>

you can get how many divs in your doc with:

const divs = document.querySelectorAll('div');
console.log(divs.length) // 3

Upvotes: 4

Sandeep G B
Sandeep G B

Reputation: 4015

With jQuery; checks only for spans inside a div:

JSFiddle

$(function(){
    var numberOfSpans = $('#myDiv').children('span').length;
    alert(numberOfSpans);
})();​

Upvotes: 2

jfriend00
jfriend00

Reputation: 708046

To count all descendant elements including nested elements in plain javascript, there are several options:

The simplest is probably this:

var count = parentElement.getElementsByTagName("*").length;

If you wanted the freedom to add more logic around what you count, you can recurse through the local tree like this:

function countDescendantElements(parent) {
    var node = parent.firstChild, cnt = 0;
    while (node) {
        if (node.nodeType === 1) {
            cnt++;
            cnt += countDescendantElements(node);
        }
        node = node.nextSibling;
    }
    return(cnt);
}

Working Demo: http://jsfiddle.net/jfriend00/kD73F/

If you just wanted to count direct children (not deeper levels) and only wanted to count element nodes (not text or comment nodes) and wanted wide browser support, you could do this:

function countChildElements(parent) {
    var children = parent.childNodes, cnt = 0;
    for (var i = 0, len = children.length; i < len; i++) {
        if (children[i].nodeType === 1) {
            ++cnt;
        }
    }
    return(cnt);
}

Upvotes: 2

Scott
Scott

Reputation: 21511

You can use this function, it will avoid counting TextNodes. You can choose to count the children of the children (i.e. recursive)

function getCount(parent, getChildrensChildren){
    var relevantChildren = 0;
    var children = parent.childNodes.length;
    for(var i=0; i < children; i++){
        if(parent.childNodes[i].nodeType != 3){
            if(getChildrensChildren)
                relevantChildren += getCount(parent.childNodes[i],true);
            relevantChildren++;
        }
    }
    return relevantChildren;
}

Usage:

var element = document.getElementById("someElement");
alert(getCount(element, false)); // Simply one level
alert(getCount(element, true)); // Get all child node count

Try it out here: JS Fiddle

Upvotes: 25

Oriol
Oriol

Reputation: 288620

If you want the number of descendants, you can use

var element = document.getElementById("theElementId");
var numberOfChildren = element.getElementsByTagName('*').length

But if you want the number of immediate children, use

element.childElementCount

See browser support here: http://help.dottoro.com/ljsfamht.php

or

element.children.length

See browser support here: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Upvotes: 56

Chango
Chango

Reputation: 6782

Without jQuery:

var element = document.getElementById("theElementId");
var numberOfChildren = element.children.length

With jQuery:

var $element = $(cssSelectocr);
var numberOfChildren = $element.children().length;

Both of this return only immediate children.

Upvotes: 9

Krycke
Krycke

Reputation: 3186

With jQuery you can do like this:

var count = $('div').children().length;
alert( count );​​​

Here's a Fiddle: http://jsfiddle.net/dryYq/1/

Upvotes: 2

Related Questions