forループ内のループ？ - Javascript

Question

初心者のJavaScriptの質問です。私はここに投稿する前にできるだけ多くのことを研究しました。私は多くの解決策を試しましたが、間違ったことを探している可能性があります。

私が持っている問題の下に画像を添付しました。私は暗い青色のボックス内のすべてを取得しようとしていますが、それらの入力タグを識別することはできません。固有のものはないので、親divをクラス 'f-active'で識別できます。 divは、そのクラスを持っているとき、彼らは私が興味を持って何であるユーザによって選択されています。

私の試みを、これまで

var divArray = document.querySelectorAll('div.add-filter.f-active'); 
 
var arr = []; 
 
    
 
    for(var i=0; i < divArray.length; i++){ 
 
    var childArray = divArray[i].children; 
 
    // console.log(childArray); 
 
    
 
    for(var i=0; i < childArray.length; i++){ 
 
     if(childArray[i].tagName == "INPUT"){ 
 
     var catNameCollection = arr.push(childArray[i].name); 
 
     // console.log(catNameCollection); 
 
    } 
 
} 
 
}

私が使用しようとしましたループを使用してすべての親を取得し、別のforループを使用して子（入力タグ）を選択し、name属性を取得します。私はもともとdocument.querySelectorAll（ 'div.add-filter.f-active'）。childrenという名前で 'divArray'を作成しようとしましたが、これはforループのname属性を取得しましたが、これは何も返しませんでしたすべて。

私が間違っていることを知っていれば誰でも助けることができます。

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

Answer 1

クラシックは通常、DOM要素を反復処理するための最良のツールではありません - 彼らはあなたが巣にそれらを持っている場合は特に、混乱の多くを追加し、エラーが発生しやすいです。

あなたの場合、代わりにdiv.f-activeの親を持つすべての入力要素を直接取得するようにクエリを変更し、forEachを使って繰り返して名前を抽出する方が簡単です。例えば、（ES6以上を使用して）：

const arr = []; 
// Get list of all <input> elements that have <div> element parents with class f-active. 
const nodes = document.querySelectorAll('div.add-filter.f-active > input'); 
// Extract name from each input element matched by your selector. 
nodes.forEach(node => arr.push(node.name)); 

それともはES5を使用して立ち往生している場合：

var arr = []; 
var nodes = document.querySelectorAll('div.add-filter.f-active > input'); 
nodes.forEach(function(node) { 
    arr.push(node.name); 
}); 

Here's a quick JSFiddle I put together to demonstrate the concept for you。

うまくいけば助けてください:)

Answer 2

iは両方のループで同じです。用途：forループ

var divArray = document.querySelectorAll('div.add-filter.f-active'); 
var arr = []; 

    for(var i=0; i < divArray.length; i++){ 
    var childArray = divArray[i].children; 
    // console.log(childArray); 

    for(var k=0; k < childArray.length; k++){ 
     if(childArray[k].tagName == "INPUT"){ 
     var catNameCollection = arr.push(childArray[k].name); 
     // console.log(catNameCollection); 
    } 
} 
}