备用 div 背景颜色答案

【问题标题】：Alternate div background color备用 div 背景颜色
【发布时间】：2011-09-05 00:10:39
【问题描述】：

我的结构如下：

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

它会在整个动态页面中重复几次。我想用两种颜色替换 div 类“post”的背景颜色，但 CSS 的 nth-child 伪类似乎只适用于直接顺序的项目。

有没有办法（CSS、Javascript、jQuery 等）我可以交替 div 背景颜色？

【问题讨论】：

标签： javascript jquery css dom pseudo-class

【解决方案1】：

jQuery 的 :odd 和 :even 选择器非常方便：

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

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/

编辑：

非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";
}

【讨论】：

谢谢，不过我似乎遇到了麻烦。我已经包含了 jQuery，我使用了这个：$(document).ready(function() { $(".post:even").css("background-color","blue"); $(".post:odd").css("background-color","red"); }); 但它不起作用。
@Rodney 您包含哪个版本的 jQuery？我发布的链接对你有用吗？
@Rodney 嗯，很奇怪。您使用的是哪个浏览器？您是否已将代码缩减为仅在我的答案中提供的代码（以消除任何可能的干扰）？
我可能有冲突/更高先例的 CSS。我会检查我的代码并回复你。非常感谢！
是的，只是 CSS 冲突。现在效果很好！谢谢！

【解决方案2】：

jquery方式：

$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');

【讨论】：

【解决方案3】：

通常我所做的是在后端分配一个“奇数”或“偶数”的 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"...
}

然后在您的类中定义您希望交替 div 具有的颜色。

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }

【讨论】：

很遗憾，我无法在此页面上使用 PHP。不过谢谢！

【解决方案4】：

可以很容易地使用 jquery :odd 和 :even 选择器完成：

$(".wrapper div.post:odd").addClass('odd'); 
$(".wrapper div.post:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

【讨论】：

【解决方案5】：

.post:nth-child(odd)

不适合你？

【讨论】：

不。我相信 .post div 必须是完全连续的（即，没有父 div 包装它们）。
英语是我的第一语言。但是，我并不是在暗示他们是愚蠢的。只是试图澄清他们以前使用的 CSS 不起作用。我认为这是一个无害的问题，也许最好放在评论中，但仍然无害。

【解决方案6】：

:even Selector

http://api.jquery.com/even-selector/

希望对你有帮助

【讨论】：