Question

我有一个带有.myTable类的html表，我希望通过按每个表行的索引（不使用偶数和奇数选择器）来交替行。

我有

$(".myTable tr.dtal").eq(0).css("background-color", "#505050");
$(".myTable tr.dtal").eq(1).css("background-color", "#2a2a2a");
$(".myTable tr.dtal").eq(2).css("background-color", "#505050");
$(".myTable tr.dtal").eq(3).css("background-color", "#2a2a2a");
$(".myTable tr.dtal").eq(4).css("background-color", "#505050");
$(".myTable tr.dtal").eq(5).css("background-color", "#2a2a2a");
$(".myTable tr.dtal").eq(6).css("background-color", "#505050");
$(".myTable tr.dtal").eq(7).css("background-color", "#2a2a2a");
$(".myTable tr.dtal").eq(8).css("background-color", "#505050");
$(".myTable tr.dtal").eq(9).css("background-color", "#2a2a2a");

我正在计算表格行

var allRows = $('.myTable tbody tr.dtal').length);

那么如何使用循环以编程方式应用此bg颜色（不使用偶数和奇数jquery选择器）？

Answer 1

Wit odd / even（我看不出它有什么问题）

$(".myTable tr.dtal:odd").css({"background-color": "#505050"});
$(".myTable tr.dtal:even").css({"background-color": "#2a2a2a"});

否则

$(".myTable tr.dtal").each(function (idx, domEl) { // iterate over the matched set
    var color = idx%2 ? "#505050":"#2a2a2a";    // if idx is odd: "#505050" otherwise "#2a2a2a"
    $(domEl).css({                                 // apply the css
        "background-color": color
    });
});

请参阅.each

上的文档

Answer 2

// Loop through each matching element
$(".myTable tr.dtal").each(function(index) {

    var 
        // Check whether index is even or odd
        indexIsEven = index % 2 === 0

        // Set background color based on whether our index is even or odd
        bg = indexIsEven  ? '#505050' : '#2a2a2a'
    ;

    // Set the backgroundColor of our element to our background color variable
    $(this).css({ backgroundColor: bg });

});

可以简化为：

$(".myTable tr.dtal").each(function(i) {
    $(this).css({ backgroundColor: index % 2 === 0? '#505050' : '#2a2a2a' });
});

Answer 3

使用jQuery .each方法遍历每个元素，检查索引，并相应地应用样式

var fColor = "#505050";
var sColor = "#2a2a2a";
$(".myTable tr.dtal").each(function(index,ele){
   $(this).css("background-color", index%2 > 0 ? sColor : fColor);
});

Answer 4

你可以这样做：

$(".myTable tr.dtal:nth-child(2n+1)").css("background-color", "#505050");
$(".myTable tr.dtal:nth-child(2n+2)").css("background-color", "#2a2a2a");

或：

$(".myTable tr.dtal").each(function(index){
  var color = (index % 2 == 0) ? "#2a2a2a" : "#505050";
  $(this).css("background-color", color );
});

jquery nth选择器，交替颜色但不使用奇数和偶数选择器

4 个答案: