2013-08-22 126 views
2

我有這個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,背景元素的顏色變化(偶數和奇數變化) 我該如何防止這種變化?

+3

那麼,你將項目添加到DOM之前,你可以去通過,並添加。即便和.odd課程給他們。然後將您的:nth-​​child()更改爲.even和.odd。 – Richard

+1

爲什麼背景顏色改變不正確?看起來你應該很高興它爲你做這個:) – Spork

+2

+1 @Richard,我正要推薦類。僞動態元素的使用是棘手的業務,而使用類將保證一致性。作爲一個方面說明,你真的應該遠離jQuery中的CSS選擇器,因爲性能原因......'$('#content_2')。find('。mCSV_container')。find('li')。first()'will跑得更快。 – PlantTheIdea

回答

0

首先,奇/偶類添加到項目:

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

那麼這點之後添加節點。

此外,改變你的CSS規則「即使」和「.odd」而不是:第n個孩子()

+0

沒有測試過......不知道它是否會運行,但它看起來是正確的。 – Richard

0

如果只向列表中添加1個元素,則會切換奇數/偶數樣式。如果您不希望它們切換,則需要將新元素添加到列表底部或添加偶數個新元素。

下面是添加到列表頂部或底部的一個簡單示例:http://jsfiddle.net/VHm7z/1您可以將項目添加到列表的頂部或底部。

假設你有一個列表,列表是一個jQuery對象爲UL元素和李是一個LI元素的jQuery對象:

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

或者

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

向底部添加一個新項目將不起作用,但添加一個偶數就可以解決問題。 – Richard

+0

@Richard添加到列表底部不會更改其他列表項目的bg顏色,儘管這些項目的順序可能不合意。 – Silkster

+0

result.html也可能有多個列表項目,我猜。這也將通過它。 – Silkster

0

,如果他們都li元素,因爲你的代碼可以處理奇數和偶數的元素,所以背景圖像變化是很自然的,而且你在頂部添加了一個額外的元素。也許爲第一個孩子創建一個規則,它總是相同的顏色,可以防止它。