迭代柵格行一次一個

Question

我需要迭代通過網格，並將更改應用到每行的子節點。例如，如果我有一個3行的網格，我怎麼能做到這一點，所以每一行的孩子可以是不同的顏色？這是一些基本的HTML + CSS的JSFiddle來創建一個網格。我想製作它，所以每一行都是不同的顏色。

http://jsfiddle.net/onestepcreative/24Ljw/6/

想法？提前致謝！

Answer 1

這裏有一個簡單的JavaScript版本。您也可以只用CSS使用第n個孩子選擇

http://jsfiddle.net/24Ljw/8/

Answer 2

下面是一個小提琴，將一類「灰色」追加到奇數行

http://jsfiddle.net/24Ljw/9/

Answer 3

你有沒有聽說過這樣做的createTreeWalker？ https://developer.mozilla.org/en/DOM/document.createTreeWalker

此方法允許您在不遞歸的情況下迭代DOM節點。

雖然你正在尋找的可能是一個循環。這裏是原生的js。

//Get the elements 
var grids = document.querySelectorAll(".grid_row > div"); 

// Make up the colors 
var colors = [ 
    "#fff", "#000", "#666", "#555", 
    "#f4f4f4", "#111", "#222", "#333", 
    "#f0f0f0", "#f2f2f2", "#f8f8f8", "#010101" 
]; 

// Turn it into an array and not a nodeList 
grids = Array.prototype.slice.apply(grids); 

// Loop over the array 
grids.forEach(function(grid, i) { 
    grid.style.backgroundColor = colors[i];     
});