Question

我没有这方面的表或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>

Answer 1

你可以使用:nth-child(odd)（或者甚至）

来处理CSS（3）

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

<强> jsFiddle example

Answer 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.

仅适用于具有class dataset..add类选择器div的div。试试这个

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

Answer 3

如果你必须使用jQuery：

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

jsFiddle

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

jsFiddle

Answer 4

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

使用JQuery我怎么能将每隔一行变成黑色？

4 个答案: