行の要素の数が可変である場合、jQueryを使用して2行目ごとに色を付ける方法はありますか？ （<a href="http://jsfiddle.net/Ug6wD/" rel="nofollow noreferrer">live demo here</a>）</p> <p>JS：

Question

は毎秒行に色べき次の例を考え

$(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; 
} 

出力である：

ご覧のとおり、color_rows()関数は、行ごとに5つの要素があることを前提としています。たとえば、divの幅をに変更した場合、color_rows()関数は正常に機能しません（つまり、1行おきに色付けされません）。

color_rows()はどのようにしてdivのすべての幅で機能するように修正できますか？

Answer 1

は、これが私のソリューションです：各要素のオフセットを上にして、新しい行ならば、それは検出し、ループの最後の要素のオフセットを先頭に、それを比較することによって、ベース

この作品行の色の行数に基づいて表示されます。

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

編集：これは、いくつかのdiv-幅でのみ動作します。..ネヴァーマインド-.-、そして...

これはそれを行う必要があります。

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 3

私の修正を見http://jsfiddle.net/Ug6wD/5/

Iコンテナの幅、itemWidth + marginを取得しています。 1行あたりのアイテム数を計算します。スパンアイテムからマージンを取得します。

次に、オーバーフロースクロールバーのコンテナ幅、マイナス20にマイナス20を設定します。

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

}破損の原因とCSS、右のスクロールバーの修正からダイナミックマージン右値と UPDATE：http://jsfiddle.net/Ug6wD/5/

Answer 4

フィドル：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

私はあなたのコードを修正しましたが、thisをしないでくださいしてください。インターネットは痛みで、

$(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

簡単な方法があります：

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