当一行中的元素数量可变时，如何使用jQuery每隔一行着色？

Question

考虑以下示例，它应该每隔一行着色一次：(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;
}

输出是：

如您所见，color_rows() 函数假定每行有 5 个元素。例如，如果我将div 的宽度更改为350px，color_rows() 函数将无法正常工作（即不会每隔一行着色）。

如何修复 color_rows() 使其适用于 div 的每个宽度？

Answer 1

有一个更简单的方法：

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

Answer 2

我已经修复了你的代码，但请不要这样做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 3

看看我的修复http://jsfiddle.net/Ug6wD/5/

我得到容器宽度，itemWidth + margin。并计算每行有多少项目。从 span 项中获取 margin-right。

然后将容器宽度减去 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 的动态边距右值和右滚动条修复导致损坏：http://jsfiddle.net/Ug6wD/5/

Answer 4

这是我的解决方案：

这基于每个元素的顶部偏移量并通过将其与循环中最后一个元素的顶部偏移量进行比较来检测是否看到新行，然后根据行颜色行数。

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 5

小提琴：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 6

编辑：这仅适用于某些 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");
        }
    });
}