Question

新手javascript问题。我确保在发布之前尽可能多地进行研究，我尝试了很多解决方案，但可能会找错页。

我已经在我的问题下方附上了一张图片。我试图在深蓝色框中检索所有内容，但我无法识别那些输入标签，因为它们没有任何独特之处，但我可以通过类识别他们的父级div＆＃39; f-活性＆＃39 ;.当div具有该类时，用户已经选择了我感兴趣的类。

到目前为止我的尝试

＆＃13;

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

＆＃13;

我尝试使用for循环来获取所有父项，然后使用另一个for循环来选择子项（输入标记），然后获取name属性，但它只是输出数字。我最初尝试创建“divArray”＃39; as document.querySelectorAll（＆＃39; div.add-filter.f-active＆＃39;）。children，但是然后在for循环中获取name属性，但这并没有返回任何内容。

任何人都可以提供的帮助将不胜感激，我很想知道我做错了什么。

谢谢！

Answer 1

两个循环的 i 相同。使用：

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

Answer 2

经典for循环通常不是迭代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。（您需要打开控制台才能看到结果）

希望这有助于：）

for for循环中的循环？ - Javascript

2 个答案: