CODEWITHSUNDEEP
javascriptgridloops
onestepcreative
onestepcreative

Reputation: 561

Iterate Grid Rows One at a Time

I'm needing to to iterate thru a grid, and apply changes to the children of each row. For instance, If I had a grid that was 3 rows, how could I make it so each row's children could be a different color? Here is a JSFiddle of some basic HTML + CSS to create a grid. I'm wanting to make it so each row would be a different color.

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

Thoughts? Thanks in advance!

Upvotes: 0

Views: 526

Answers (3)

Alex Grande
Alex Grande

Reputation: 8027

Have you heard of createTreeWalker? https://developer.mozilla.org/en/DOM/document.createTreeWalker

This method allows you to iterator over nodes in the DOM without recursion.

What you are looking for is probably a loop, though. Here it is with native 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];                
});

​

Upvotes: 0

SMathew
SMathew

Reputation: 4003

Here's a version with a simple javascript. You can also do this with just CSS using the nth-child selector

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

Upvotes: 3

Austin
Austin

Reputation: 6034

Here is a fiddle that will append a class "grey" to odd rows

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

Upvotes: 0

Related Questions