33

内部にスパンのあるdivがあります。div内の要素の数を数え、それを値として与える方法はありますか？たとえば、divに5つのスパンがあった場合、それをカウントして5つアラートします。Javascriptでお願いします。

ありがとうございました。

4

8 に答える 8

41

子孫の数が必要な場合は、

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

于 2012-09-02T16:22:14.507 に答える
25

この関数を使用すると、TextNodeのカウントを回避できます。あなたは子供たちの子供たちを数えることを選ぶことができます（すなわち再帰的）

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

于 2012-09-02T16:15:07.983 に答える
7

jQueryなし：

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

jQueryの場合：

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

この両方は、直接の子供だけを返します。

于 2012-09-02T16:13:38.667 に答える
3

jQueryを使用; div内のスパンのみをチェックします。

JSFiddle

$(function(){
    var numberOfSpans = $('#myDiv').children('span').length;
    alert(numberOfSpans);
})();​
于 2012-09-02T16:16:39.360 に答える
3

私はただ愚かで簡単な1つの答えを追加するかもしれません

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

次のコマンドを使用して、ドキュメント内のdivの数を取得できます。

const divs = document.querySelectorAll('div');
console.log(divs.length) // 3
于 2019-10-01T02:34:05.420 に答える
2

jQueryを使用すると、次のように実行できます。

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

これがフィドルです：http：//jsfiddle.net/dryYq/1/

于 2012-09-02T16:12:00.420 に答える
2

プレーン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);
}
于 2012-09-02T16:24:13.810 に答える
2

最も簡単な方法は、div内のすべてのスパンを選択することです。これにより、すべてのスパンが含まれるノードリストが返されます...次に、以下の例のように長さをアラートできます。

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

于 2020-12-27T14:24:35.283 に答える