divから特定のタイプの直接的な子どもの数を取得

Imはjavascriptに新しいので、各divが直接の子として持つ段落の数を取得しようとしています。divから特定のタイプの直接的な子どもの数を取得

例：

<div id="1"> 
    <p>text</p> 
    <p>text</p> 
    <div id="2"> 
     <p>text</p> 
    </div> 
</div> 
<div id="3"> 
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
</div>

を探している結果IM：

DIV 1 = 2
DIV = 1 2
DIV = 3 3

私が今までに得たコードは次のようになります：

var divs = document.getElementsByTagName('div'); 
for(var i = 0; i < divs.length; i++){ 
    var count = divs[i].getElementsByTagName('p').childElementCount; 
    console.log('div ' + i + ' count ' + count); 
}

結果：

Console log

はなぜ "未定義の" 得るのですか？ .childElementCountの代わりに.lengthを使ってみましたが、それでも私には望みの結果が得られませんでした。

jqueryはこの解決方法を見つけるのに苦労しています。jqueryはオプションではありません。

出典

2017-11-19 DoesItRlyMatter

var divs = document.getElementsByTagName('div'); 
 
for (var i = 0; i < divs.length; i++) { 
 
    var count = divs[i].querySelectorAll(':scope > p').length; 
 
    console.log('div ' + i + ' count ' + count); 
 
}

<div id="1"> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <div id="2"> 
 
    <p>text</p> 
 
    </div> 
 
</div> 
 
<div id="3"> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <p>text</p> 
 
</div>

:scopeを助け

出典

2017-11-19 22:38:59 themefield

まず：

getElementsByTagNameは、構造（HTMLCollection）のような配列を返しています。あなたは.lengthでリストの長さを得ることができます。

DOMオブジェクトのみでchildElementCountを使用できますが、コレクションでは使用できません。

第二：

getElementsByTagNameは、直接の子だけでなく、すべての子孫が返されます。これに対する解決策は、stackoverflow hereの前に提示されています。回答が役に立つ場合は、そこに投票することを忘れないでください。より効率的に

、私はdivタグの子を検索することをお勧めしたい：

for(var i = 0; i < divs.length; i++){ 
    var children = divs[i].children, 
     divCount = 0; 
    for(var childIndex = 0; childIndex < children.length; childIndex++) 
     if(children[childIndex].tagName == 'DIV') 
      divCount++; 

    console.log('div ' + i + ' count ' + divCount); 
}

それとも詳細オタク行くと軽減機能と相まって.reduce()を使用しています。これは

let divs = document.getElementsByTagName('div') 
 

 
Array.prototype.slice.call(divs).map(div => { 
 
    let count = 0; 
 
    Array.prototype.slice.call(div.getElementsByTagName('p')).forEach(p => { 
 
    if (p.parentNode == div) { 
 
     count++; 
 
    } 
 
    }) 
 
    console.log('div ', div.id, " = ", count) 
 
})

<body> 
 
    <div id="1"> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <div id="2"> 
 
     <p>text</p> 
 
    </div> 
 
    </div> 
 
    <div id="3"> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
    </div> 
 
</body>

出典

2017-11-19 21:22:59 Syntac

これで、ChildElementCountが機能しませんが、.lengthで目的の結果が得られない理由がわかりました。 – DoesItRlyMatter

いいえ、その戻り値は未定義です。そのdiv0 count3、div1 count1、div2 count3を返します。私が望むものがdiv0 count2、div1 count1、div2 count3です。メインスレッドで探している結果の例を載せようとしました（直接的な子供が正しい言葉であるかどうか疑問に思う）。 – DoesItRlyMatter

@DoesItRlyMatterここでは非常によく似た質問があります：https://stackoverflow.com/questions/15750927/how-to-run-getelementsbytagname-on-children-of-an-element-only#15750959 – Syntac

希望は、親要素そのものを意味します。 >は直接/直属の子供を選択することを意味します。

疑似クラスが現在サポートされている方法を確認してください。here IEからのサポートはありませんが、利用可能なのはshimです。

出典

2017-11-19 21:48:01

悲しいことに、私のコードで.ChildElementCountを.lengthに変更すると同じ結果が得られますが、探しているものはDIV 1 = 2、DIV 2 = 1、DIV 3 = 3になります。 – DoesItRlyMatter

私はいくつかの変更を行いました。見て） –

divから特定のタイプの直接的な子どもの数を取得

答えて

関連する問題