for循环for循环？ - Javascript

新手javascript问题。我在发布之前尽可能多地研究，我已经尝试了许多解决方案，但可能会寻找错误的东西。for循环for循环？ - Javascript

我附上了我有问题的图片。我试图检索深蓝色框中的所有内容，但我无法识别这些输入标签，因为它们没有任何独特之处，但是我可以通过“f-active”类识别它们的父级div。当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循环来选择孩子（输入标签），然后获取姓名属性，但它只是输出数字。我最初尝试创建'divArray'作为document.querySelectorAll（'div.add-filter.f-active'）。children，但是，然后抓住for循环中的name属性，但是这并没有返回任何东西所有。

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

谢谢！

来源

2017-06-22 Matt

您的内循环必须使用另一个变量名称。 – spectras

你的'var i'对于两个循环都是一样的 –

'let'而不是'var'也会解决这个问题：p –

经典for循环通常不是通过DOM元素进行迭代的最佳工具 - 他们增添了不少杂乱，且容易出错，尤其是当你有嵌套它们。

在你的情况下，改为修改你的查询来直接抓住所有输入元素与一个div.f活动的父母，然后通过使用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。（您需要打开控制台才能看到结果）

希望可以帮助:)

来源

2017-06-22 07:33:19

这看起来好多了，不幸的是我使用GTM来做到这一点，我相信使用ES5，你可以把它转换成ES5吗？我尝试了Babeljs，但是它导致零输出:( – Matt

完全可行，刚刚在JSFiddle上面添加了一个ES5解决方案（箭头函数和常量是这里唯一的区别）这是否适合您？ –

你的我是两个循环相同。用途：

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

来源

2017-06-22 06:59:21 hamzox

谢谢哈姆兹克斯，我现在已经做出了改变。我现在得到的输出不是破坏控制台，这是一个伟大的改进:)然而，它现在只是输出所选元素的数量，而不是'name'属性，任何想法？我很难过。 – Matt

for循环for循环？ - Javascript

回答

相关问题