迭代栅格行一次一个

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