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

【问题标题】：jquery nth selector, alternating color but not using odd and even selectorjquery nth 选择器，交替颜色但不使用奇偶选择器
【发布时间】：2014-10-12 09:40:04
【问题描述】：

我有一个 .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 选择器）？

【问题讨论】：

为什么你不想使用奇数/偶数……？
因为我有一些遗留代码，在呈现这个 html 表时存在错误。我想直接击中每一行并完成它。我知道使用奇偶更容易

标签： javascript jquery

【解决方案1】：

机智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 上的文档

【讨论】：

【解决方案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' });
});

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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 );
});

【讨论】：