我动态地创建一个div作为HTML字符串并将其附加到容器中。
$('#add-row').click(function(){
var row="<div class='red'></div>";
$('#container').append(row);
});div.red {
width: 100%;
height: 32px;
}
div.red:nth-child(even) {
background-color: red;
}<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>
这很有效。我现在需要创建两个div并将它们附加到容器中。
$('#add-row').click(function(){
var row="<div class='red'></div><div class='not-red'></div>";
$('#container').append(row);
});div.red,div.not-red {
width: 100%;
height: 32px;
}
div.red:nth-child(even) {
background-color: red;
}<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>
追加div后出现问题;具体而言，div.red:nth-child(even)不再适用。 From what I've understood，这对于正确的选择器来说不应该是一个问题。这可能是:nth-of-type更适合的情况，但我的尝试没有取得成功。