javascript 替代 div 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6179810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternate div background color
提问by redgem
I have a structure like the following:
我有如下结构：
<div class="wrapper"...>
<a href="#"...>blah</a>
<div class="post"...>stuff</div>
</div>
And it repeats throughout a dynamic page a few times. I would like to alternate the background colors of the div class "post" with two colors, but CSS's nth-child pseudo class only seems to work with items that are directly sequential.
它在整个动态页面中重复几次。我想用两种颜色交替 div 类“post”的背景颜色，但 CSS 的 nth-child 伪类似乎只适用于直接顺序的项目。
Is there a way (CSS, Javascript, jQuery, etc.) that I can alternate the div background colors?
有没有办法（CSS、Javascript、jQuery 等）可以改变 div 背景颜色？
回答by Thomas Shields
jQuery's :odd and :even selectors are pretty handy:
jQuery 的 :odd 和 :even 选择器非常方便：
$(".post:even").css("background-color","blue");
$(".post:odd").css("background-color","red");
HTML:
HTML：
<div class="wrapper">
<a href="#">blah</a>
<div class="post">stuff</div>
</div>
<div class="wrapper">
<a href="#">blah</a>
<div class="post">stuff</div>
</div>
...
http://jsfiddle.net/thomas4g/uaYd9/2/
http://jsfiddle.net/thomas4g/uaYd9/2/
EDIT:
编辑：
The non-jQuery, quick JS way:
非 jQuery 的快速 JS 方式：
var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
//or
posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}
回答by gion_13
the jquery way:
jquery方式：
$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');
回答by King Skippus
Typically what I do is assign a css class of "odd" or "even" on the back end. For example, if the page is dynamically generated in PHP, I'd do something like:
通常我所做的是在后端分配一个“奇数”或“偶数”的css类。例如，如果页面是在 PHP 中动态生成的，我会执行以下操作：
for ($i = 0; $i < count($rows); $i++) {
$css_class = 'wrapper '; // Elements can have multiple css classes
$css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
// generate html using class="$css_class"...
}
Then define in your class the colors you want the alternating divs to have.
然后在您的班级中定义您希望交替 div 具有的颜色。
.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }
回答by Niklas
Can be done with jquery :oddand :evenselectors quite easily:
可以很容易地使用 jquery:odd和:even选择器完成：
$(".wrapper div.post:odd").addClass('odd');
$(".wrapper div.post:even").addClass('even');
回答by Jrod
.post:nth-child(odd)
Doesn't work for you?
不适合你？
回答by zod
:even Selector
http://api.jquery.com/even-selector/
http://api.jquery.com/even-selector/
I hope this will hep you
我希望这会帮助你
