Zähle wie viele Elemente in einem div

Ich habe ein div mit span drin. Gibt es eine Möglichkeit zu zählen, wie viele Elemente in einem div dann als Wert ausgegeben werden. Zum Beispiel gab es 5 Spannen in einem Div, dann würde es zählen und fünf alarmieren. Bitte in Javascript.

Vielen Dank.

Wenn Sie die Anzahl der Nachkommen möchten, können Sie verwenden

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

Wenn Sie jedoch die Anzahl der unmittelbar untergeordneten Elemente möchten, verwenden Sie

element.childElementCount

Siehe Browserunterstützung hier: http://help.dottoro.com/ljsfamht.php

oder

element.children.length

Siehe Browserunterstützung hier: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Sie können diese Funktion verwenden, sie vermeidet das Zählen von TextNodes. Sie können wählen, ob Sie die Kinder der Kinder zählen möchten (dh rekursiv).

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;
}

Verwendungszweck:

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

Probieren Sie es hier aus:
JS Geige

Ohne jQuery:

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

Mit jQuery:

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

Beide geben nur unmittelbar untergeordnete Elemente zurück.

Mit jQuery; prüft nur auf Spannen innerhalb eines div:

JSFiddle

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

Ich könnte nur eine dumme und einfache Antwort hinzufügen

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

Sie können wie viele divs in Ihrem Dokument erhalten mit:

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

Mit jQuery geht das so:

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

Hier ist eine Geige: http://jsfiddle.net/dryYq/1/

Um alle untergeordneten Elemente einschließlich verschachtelter Elemente in einfachem Javascript zu zählen, gibt es mehrere Optionen:

Das einfachste ist wohl das:

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

Wenn Sie die Freiheit haben möchten, dem, was Sie zählen, mehr Logik hinzuzufügen, können Sie den lokalen Baum wie folgt rekursiv durchlaufen:

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

Arbeitsdemo: http://jsfiddle.net/jfriend00/kD73F/

Wenn Sie nur direkte untergeordnete Elemente (keine tieferen Ebenen) und nur Elementknoten (keine Text- oder Kommentarknoten) zählen und eine breite Browserunterstützung wünschen, können Sie dies tun:

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