div的条纹类答案

【问题标题】：Stripe class for divdiv的条纹类
【发布时间】：2011-05-24 17:45:06
【问题描述】：

我有一长串多个 div 的列表...比如说 20 个 div

全部换一个..

<div id="main">
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
.... etc
</div>

我喜欢在二分之一的 div 中添加“灰色”类并使其成为斑马！请用jquery！

【问题讨论】：

excuse.. 做了一些更正（id/class）
其实你的旧代码没问题。您的新 ID 无效，因为您的 ID 重复。
其实你根本不需要 xyz 类。如果另一个元素中的所有元素都具有相同的类，则最好将其删除并通过#main > div 选择它们。
不是我的所有代码...使用其他代码...必须生活并完成工作...
您是说这是您无法更改的代码，但它确实有多个 id？这是一项艰巨的工作，我去过那里，这很烦人。不过，我的回答应该有效:)

标签： jquery html css zebra-striping

【解决方案1】：

jQuery 让它变得尽可能简单：

$('#main>div.xyz:even').addClass('grey');

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

【讨论】：

【解决方案2】：

$('.xyz:odd').addClass('grey');

请注意“灰色”不是语义类名。最好叫 id 'odd' 或 'zebra' 什么的。如果您下定决心将奇怪的颜色更改为蓝色，那么您的班级名称将非常奇怪：P

【讨论】：

【解决方案3】：

如果您不关心旧版本的 IE，您可以单独使用 CSS：

.xyz:nth-child(odd) {
  background-color: ...;
}

.xyz:nth-child(even) {
  background-color: ...;
}

【讨论】：

我在乎！...必须是 ie6 友好的！
不幸的是，即使 IE8 也不支持这个.. 太糟糕了。