如何使用：nth-​​child（）在使用JavaScript添加元素时使用不同的背景颜色

Question

我刚刚发现了:nth-child()选择器，效果很好。当我在我的网站上显示div时，我希望能够为div更改背景颜色。 像这样在这里

<div class="background-color">Content</div> <!-- White background-color -->
<div class="background-color">Content</div> <!-- Black background-color -->
<div class="background-color">Content</div> <!-- White background-color -->
<div class="background-color">Content</div> <!-- Black background-color -->

等等。所有这些都很有效。我唯一的问题是，如果我通过JS函数添加一个新的div，它将不会交替background-color。它将始终具有白色背景颜色。在JS函数中，我添加了相同的CSS类和所有内容，但它仍然无效。

我有没有办法以正确的颜色显示用户添加的新div？

Answer 1

您可以将nth-child(even)用于此类应用程序：

.background-color {
    background-color: white;
}

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

https://jsfiddle.net/86nkhwkz/

每个孩子（假设他们都是班级background-color）将交替使用背景颜色。

Answer 2

始终显示您的代码，以便我们进行修复。

function add() {
  var $d = $("<div>");
  $d.addClass("background-color").html("Content");
  $("#wrapper").append($d);
}

#wrapper > div {
  background-color: white;
  padding: 1em;
  color: red
}
#wrapper > div:nth-child(2n) {
  background-color: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="background-color">Content</div>
  <div class="background-color">Content</div>
  <div class="background-color">Content</div>
  <div class="background-color">Content</div>
</div>
<button onclick="add()">Add</button>