动态插入两个div

Question

我动态地创建一个div作为HTML字符串并将其附加到容器中。

＆＃13;

＆＃13;

$('#add-row').click(function(){
  var row="<div class='red'></div>";
  $('#container').append(row);
});

＆＃13;

div.red {
  width: 100%;
  height: 32px;
}
div.red:nth-child(even) {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<button type='button' id="add-row">Add</button>

＆＃13;

＆＃13;

＆＃13;

这很有效。我现在需要创建两个div并将它们附加到容器中。

＆＃13;

＆＃13;

$('#add-row').click(function(){
  var row="<div class='red'></div><div class='not-red'></div>";
  $('#container').append(row);
});

＆＃13;

div.red,div.not-red {
  width: 100%;
  height: 32px;
}
div.red:nth-child(even) {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<button type='button' id="add-row">Add</button>

＆＃13;

＆＃13;

＆＃13;

追加div后出现问题;具体而言，div.red:nth-child(even)不再适用。 From what I've understood，这对于正确的选择器来说不应该是一个问题。这可能是:nth-of-type更适合的情况，但我的尝试没有取得成功。