javascript - 使用javascript更改html中奇数/偶数DIV的颜色

Question

例如我们有 5 个 DIV:

<div id="container" >
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

如何更改偶数 DIV 的背景颜色？

Answer 1

CSS3 - 无法在 IE8 等旧版浏览器中运行

#container2 > div:nth-child(even){
  background: yellow;
}

jQuery 也适用于 IE8

$("#container > div:nth-child(even)").addClass("even");

我还发现了这个讨论:IE8 and jQuery selectors

这是一个DEMO of CSS3 and jQuery both

$("#container1 > div:nth-child(even)").addClass("even");

.even {
  background-color: yellow
}

#container2>div:nth-child(even) {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery:
<div id="container1">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
<hr/> CSS3:
<div id="container2">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>