一次迭代一个网格行答案

【问题标题】：Iterate Grid Rows One at a Time一次迭代一个网格行
【发布时间】：2012-07-07 09:33:10
【问题描述】：

我需要遍历一个网格，并将更改应用于每行的子项。例如，如果我有一个 3 行的网格，我怎样才能使它每行的孩子可以是不同的颜色？这是一些用于创建网格的基本 HTML + CSS 的 JSFiddle。我想做这样每一行都是不同的颜色。

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

想法？提前致谢！

【问题讨论】：

标签： javascript grid loops

【解决方案1】：

这是一个带有简单 javascript 的版本。您也可以使用 nth-child 选择器仅使用 CSS 来完成此操作

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

【讨论】：

非常感谢。我认为这会很好！

【解决方案2】：

这是一个将“灰色”类附加到奇数行的小提琴

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

【讨论】：

谢谢！我以前使用过这种技术，但我需要每行有不同的颜色。上面的答案让我朝着正确的方向前进。

【解决方案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];                
});

【讨论】：

这很棒。我肯定会在未来的项目中玩这个。谢谢！！