2017-06-22 259 views
2

新手javascript問題。我在發佈之前儘可能多地研究,我已經嘗試了許多解決方案,但可能會尋找錯誤的東西。for循環for循環? - Javascript

我附上了我有問題的圖片。我試圖檢索深藍色框中的所有內容,但我無法識別這些輸入標籤,因爲它們沒有任何獨特之處,但是我可以通過「f-active」類識別它們的父級div。當div的有他們被用戶選擇的類,這是我所感興趣的 page structure

我嘗試到目前爲止

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屬性,但是這並沒有返回任何東西所有。

任何人可以提供的幫助將不勝感激,我很想知道我做錯了什麼。

謝謝!

+4

您的內循環必須使用另一個變量名稱。 – spectras

+0

你的'var i'對於兩個循環都是一樣的 –

+0

'let'而不是'var'也會解決這個問題:p –

回答

2

經典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。 (您需要打開控制檯才能看到結果)

希望可以幫助:)

+0

這看起來好多了,不幸的是我使用GTM來做到這一點,我相信使用ES5,你可以把它轉換成ES5嗎?我嘗試了Babeljs,但是它導致零輸出:( – Matt

+0

完全可行,剛剛在JSFiddle上面添加了一個ES5解決方案(箭頭函數和常量是這裏唯一的區別) 這是否適合您? –

2

你的是兩個循環相同。用途:

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

謝謝哈姆茲克斯,我現在已經做出了改變。我現在得到的輸出不是破壞控制檯,這是一個偉大的改進:)然而,它現在只是輸出所選元素的數量,而不是'name'屬性,任何想法?我很難過。 – Matt