Подсчитайте, сколько элементов в div

Ответ 1

Вы можете использовать эту функцию, чтобы избежать подсчета TextNodes. Вы можете выбрать счет детей (то есть рекурсивный)

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

Использование:

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

Попробуйте здесь: JS Fiddle

Ответ 2

Если вы хотите количество потомков, вы можете использовать

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

Но если вы хотите количество непосредственных детей, используйте

element.childElementCount

Смотрите поддержку браузера здесь: http://help.dottoro.com/ljsfamht.php

или

element.children.length

См. поддержку браузера здесь: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Ответ 3

Без jQuery:

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

С помощью jQuery:

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

Оба этих объекта возвращают только ближайшие дети.

Ответ 4

С jQuery; проверяет только на пробелы внутри div:

JSFiddle

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

Ответ 5

Чтобы подсчитать все элементы-потомки, включая вложенные элементы в простом javascript, существует несколько вариантов:

Простейшим является, вероятно, следующее:

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

Если вам нужна свобода добавить больше логики вокруг того, что вы считаете, вы можете рекурсивно пройти через локальное дерево следующим образом:

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

Рабочая демонстрация: http://jsfiddle.net/jfriend00/kD73F/

Если вы просто хотели подсчитать прямые дочерние элементы (не более глубокие уровни) и хотели только подсчитать узлы элементов (не текстовые или комментарии узлов) и нуждались в широкой поддержке браузера, вы могли бы сделать это:

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

Ответ 6

С помощью jQuery вы можете сделать следующее:

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

Здесь сценарий: http://jsfiddle.net/dryYq/1/

Ответ 7

я мог бы добавить просто глупый и простой ответ

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

вы можете узнать, сколько дел в вашем документе:

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