0

我没有表或 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>
4

4 回答 4

9

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

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

jsFiddle 示例

于 2013-09-05T16:18:28.767 回答
5

我会使用 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');
于 2013-09-05T16:19:59.897 回答
2

使用偶数/奇数 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/

于 2013-09-05T16:26:21.340 回答
2

如果您必须为此使用 jQuery：

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

jsFiddle

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

jsFiddle

于 2013-09-05T16:21:49.540 回答