Question

我想在HTML无序列表中使用JQuery替换中的背景颜色。

Answer 1

最佳选择是CSS3 :nth-child选择器：

#myul li:nth-child(odd) {
    background-color: red;
}
#myul li:nth-child(even) {
    background-color: green;
}

或者如果由于某种原因你确实需要javascript解决方案：

<style>
    li.even { background-color: red; }
    li.odd { background-color: blue; }
</style>

var ul = document.getElementById('myul');
var items = ul.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
    var class = i % 2 == 0 ? 'even' : 'odd';
    items[i].className = class;
}

或者如前所述，您可以只生成服务器端类。

Answer 2

<style>
.uneven{background-color:red;}
.even{background-color:green;}
</style>
<ul>
<li class="uneven">A</li>
<li class="even">B</li>
<li class="uneven">C</li>
<li class="even">D</li>
</ul>

可能错过了这一点......

Answer 3

你可以用CSS做到这一点： http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

但这在IE中不起作用。

Answer 4

以下是如何在没有任何CSS的页面中对所有UL进行此操作 - http://jsfiddle.net/2G7wx/1/

HTML UL中的交替背景颜色

4 个答案: