0

グリッドを反復処理し、各行の子に変更を適用する必要があります。たとえば、3行のグリッドがある場合、各行の子が異なる色になるようにするにはどうすればよいでしょうか。これは、グリッドを作成するための基本的なHTML+CSSのJSFiddleです。各行が異なる色になるように作成したいと思います。

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

考え？前もって感謝します！

4

3 に答える 3

3

これが単純なjavascriptのバージョンです。n番目の子セレクターを使用してCSSだけでこれを行うこともできます

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

于 2012-07-07T01:13:42.207 に答える
0

これは、奇数行に「灰色」のクラスを追加するフィドルです。

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

于 2012-07-07T01:17:50.957 に答える
0

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

</ p>

于 2012-07-07T01:33:10.207 に答える