Question

我有这个css规则，

.messagesContent:nth-child(even){
    float: right;
    background: white;
}
.messagesContent:nth-child(odd){
    float: left;
    background: #ccc;
}

我使用jquery在所有元素之前添加元素，用这个

var c = $("#content_2").find(".mCSB_container li:first");
result = eval(result);
c.before(result.html);

如果添加到dom，则元素的背景颜色会发生变化（偶数和奇数变化）我该如何防止这种变化？

Answer 1

如果你只在列表中添加1个元素，那么奇数/偶数样式将会切换。如果您不希望它们切换，您需要将新元素添加到列表底部或添加偶数个新元素。

以下是添加到列表顶部或底部的简单示例：http://jsfiddle.net/VHm7z/1您可以将项目添加到列表的顶部或底部。

假设您有列表，其中list是UL元素的jQuery对象，li是LI元素的jQuery对象：

list.append(li);  // adds to bottom of list

或者

list.prepend(li);  // adds to top of list

Answer 2

如果它们都是li元素，那么背景图像的变化很自然，因为你的代码使用奇数和偶数元素，并且你在顶部添加了一个额外的元素。也许为第一个孩子创造一个规则，它总是相同的颜色，这可能会阻止它。

Answer 3

首先，将偶数/奇数类添加到项目中：

$(".messagesContent").each(function(i,obj) {
   $(obj).addClass( (i % 2 === 0 ? "even" : "odd"));
});

然后在该点之后添加节点。

另外，将CSS规则更改为“.even”和“.odd”而不是：nth-child（）

修复奇数和偶数选择器

3 个答案: