Question

我需要通过网格进行迭代，并将更改应用于每行的子项。例如，如果我有一个3行的网格，我怎么能这样做，所以每一行的孩子可能是不同的颜色？这是一个用于创建网格的基本HTML + CSS的JSFiddle。我想要这样做，所以每一行都是不同的颜色。

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

思考？提前谢谢！

Answer 1

这是一个简单的javascript版本。您也可以使用nth-child选择器

使用CSS完成此操作

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

一次迭代一行网格行

3 个答案: