如何使用:nth-child()在添加JavaScript元素时使用不同的背景颜色?

I just discovered the :nth-child() selector and it works great. I wanted to be able to give changing background-colors to divs when I display them on my site. Like this here

我刚刚发现了:nth-child()选择器，它非常好用。当我在我的网站上展示它们时，我希望能够给它们改变背景颜色。这样在这里

<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 -->

and so on. All of that works just great. The only problem I have is, if I add a new div through a JS function, it won't alternate background-color. It will always have a white background-color. Within the JS function, I add the same CSS classes and everything, but it is still not working.

等等。所有这些都很有效。我唯一的问题是，如果我通过一个JS函数添加一个新的div，它就不会改变背景颜色。它总是有白色背景色。在JS函数中，我添加了相同的CSS类和所有内容，但仍然不起作用。

Is there a way for me to display new divs added by the user in the right color?

是否有一种方法可以让我以正确的颜色显示用户添加的新div ?

2 个解决方案

#1

You could make use of nth-child(even) for this sort of application:

你可以利用nth-child(甚至)来进行这种应用:

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

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

https://jsfiddle.net/86nkhwkz/

Every child (assuming they are all of class background-color) will then alternate background colors.

每个孩子(假设他们都是背景色)会选择背景色。

#2

Always show your code so we can fix it.

始终显示您的代码，以便我们能够修复它。

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>

#1