使用 JQuery 如何将每隔一行涂成黑色？答案

【问题标题】：Using JQuery how can I color every other row black?使用 JQuery 如何将每隔一行涂成黑色？
【发布时间】：2013-09-05 16:16:11
【问题描述】：

我没有用于此的表或 ul 结构，但我使用 div 来显示数据。我需要每隔一行的背景颜色为黑色。我环顾四周，但大多数选项都是针对表格或列表菜单的，所以对于如何做到这一点有点困惑。有什么想法吗？

我的结构：

<div class="container">
     <div class="dataset">
         Thomas Jones
     </div>
     <div class="dataset">
         Edward Jones
     </div>
 <div class="dataset">
         Tommy Lee
     </div>
 <div class="dataset">
         Jenna Haze
     </div>
</div>

【问题讨论】：

请分享html
不需要 JQuery，使用 CSS。

标签： javascript jquery html function css

【解决方案1】：

您可以使用:nth-child(odd)（甚至）只使用 CSS(3)：

div.dataset:nth-child(odd) {
    background: black;
}

jsFiddle example

【讨论】：

+1 也可以使用Selectivizr 或bipen's answer 来为IE8 带来精彩。

【解决方案2】：

我会使用 CSS，但如果您在 jquery 中需要它。那么您可以使用 :even 或 :odd 选择器。

试试这个

 $('div:even').css('background-color','black'); // or just background , selects all even divs.
 $('div:odd').css('background-color','black'); //selects all odd divs.

仅适用于具有类数据集的 div。将类选择器添加到 div。试试这个

 $('div.dataset:even').css('background','black');

【讨论】：

干杯 bipen，我很确定他想要 .dataset 类的 div。为您的更改 +1！

【解决方案3】：

使用偶数/奇数 css3 选择器

HTML

<div>row1</div>
<div>row2</div>

CSS

div {
    width: 100px;
    height: 20px;
    border: 1px solid #ccc;
    color: #fff;
}

div:nth-child(odd) {
    background:red; 
}

div:nth-child(even) {
    background:black; 
}

http://jsfiddle.net/sheeban/vHGzw/

【讨论】：

【解决方案4】：

如果你必须为此使用 jQuery：

$(".dataset").each(function(index){
    if(index%2 == 0)
       $(this).css('background', 'black');
});

jsFiddle

或使用$("div.dataset:even").css('background', 'black');

jsFiddle

【讨论】：