How to color every second row using jQuery when the number of elements in a row is variable?

Question

Consider the following example, which should color every second line: ( live demo here )

JS:

$(function() { var wrapper = $("<div></div>") for (i = 0; i < 100; i++) { wrapper.append("<span></span>"); } $("body").append(wrapper); color_rows(); }); function color_rows() { $("span").each(function(i) { if (i % 10 >= 5) { $(this).css("background-color", "red"); } }); } 

CSS

 div { width: 450px; height: 400px; background-color: #ccc; overflow: auto; } span { display: inline-block; width: 50px; height: 50px; background-color: #777; margin: 0 30px 30px 0; } 

Output:

As you can see, the color_rows() function assumes that there are 5 elements in the line. If, for example, I change the width of the div to 350px , the color_rows() function will not work correctly (i.e., it will not color every second line).

How can I fix color_rows() so that it works for each div width?

Answer 1

this is my decision:

this works on the basis of the top offset of each element and, comparing it with the top offset of the last element in the loop, it detects whether the new row is visible or not, and then based on the number of rows of rows of rows.

 function color_rows() { var lastTop = -1; var rowCount = 0; $("span").each(function(i) { var top = $(this).position().top; if (top != lastTop) { rowCount++; lastTop = top; } if(rowCount % 2 == 0) { $(this).css("background-color", "red"); } }); } 

jsFiddle: http://jsfiddle.net/Ug6wD/4/

Answer 2

Take a look at my corrections http://jsfiddle.net/Ug6wD/5/

I get the width of the container, itemWidth + margin. And counting the number of elements in a row. Get margin-right from the span element.

Then minus 20 to the width of the container, coz scroll bar overflow.

 function color_rows() { var containerWidth = $('div').width()-20; var itemWidth = $('span:first').width() + parseInt($('span:first').css('margin-right')); var itemsPerRow = parseInt(containerWidth / itemWidth); $("span").each(function(i) { if (i % (itemsPerRow *2) >= itemsPerRow ) { $(this).css("background-color", "red"); } }); 

} UPDATE with dynamic margin-right value from CSS AND Right scrollbar fix causing breakage: http://jsfiddle.net/Ug6wD/5/

Answer 3

Edit: this only works on some div widths .. -.- Nevermind, then ..

This should do it:

 function color_rows() { var divW = $('div').width(); var spanW = $('span').outerWidth(true); //Get margin too var cnt = parseInt(divW/spanW, 10); //Remove decimals $("span").each(function(i) { if (i % (cnt*2) >= cnt) { $(this).css("background-color", "red"); } }); } 

Answer 4

script: http://jsfiddle.net/gn5QW/1/

HTML

 <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

Js

 $(document).ready(function(){ var box = $(".box"); var con = $("#container"); var box_per_line = Math.floor(parseInt($("#container").width())/ (parseInt( $(".box").width()) +10*2/*px*/)); var style = "black"; $(".box").each(function(i){ if(i % box_per_line == 0){ style = (style == "black") ? "grey" : "black"; } $(this).css("background-color",style); }); }); 

CSS

 .box { width: 100px; height: 100px; float: left; margin: 10px; } #conainer { background-color: grey; display: inline-block; } 

Answer 5

I fixed your code, but please PLEASE do not do this . The internet hurts

 $(function() { var wrapper = $("<div></div>") for (i = 0; i < 100; i++) { wrapper.append("<span></span>"); } $("body").append(wrapper); color_rows(); }); function color_rows() { var rowWidth = Number( $('div:first').css('width').slice(0,-2) ); var itemWidth = Number( $('span:first').css('width').slice(0,-2) ) + Number( $('span:first').css('margin-right').slice(0,-2) ); var perRow = Math.floor( rowWidth/itemWidth ); $("span").each(function(i) { if (i % 10 >= perRow ) { $(this).css("background-color", "red"); } }); } 

Answer 6

There is an easier way:

 $('tr:even').css("background-color", "red");