應用適當的斑馬條紋圖案，用jQuery

附加DOM元素我使用應用適當的斑馬條紋圖案，用jQuery

$(".entry").filter(":odd").addClass('alt');

內$(document).ready()，以方便與一切階級「入口」的斑馬條紋。

在與頁面進行交互的過程中，帶有「入口」類的新DOM元素在最後一個接一個地附加。我想使用類似於上面的內容來確保新添加的條目具有適當的背景色，這意味着與之前的任何「條目」相反的顏色。

我想不出一個優雅的（或者真的有）這樣做。有任何想法嗎？有沒有類似於.live()的東西可以將此規則應用於所有當前和未來的比賽？

UPDATE

編輯：移動更新回答

來源

2011-09-19 Jake

可以使用css代替。 – Loktar

有些人已經聲明CSS會更好，但如果你綁定到JavaScript，那麼我會在你將元素附加到DOM時調用的獨立函數中進行addClass調用 – Seth

好的CSS解決方案絕對是最優雅的。從技術上講，它可以工作，但我忘了提到，雖然一個元素被添加到底部，頂部元素被刪除（向上滑動）。最終結果是「條目」的總數保持不變。一旦slideUp動畫完成，當** all **元素交換它們的BG顏色時，CSS解決方案在此時會引起一些不和諧的效果。我認爲我必須使用jQuery解決方案（掛起）來確保只有附加元素被更改，除非其他人知道如何使用CSS實現它。 – Jake

該解決方案是幾乎沒有的CSS的答案優雅，但它正是我需要它沒有任何的分心的副作用：

第一我鏈接在DOM的尾部追加：

$('#articles').append('putyourDOMelementinhere').addClass('new');

然後我有一個笨拙的條件語句來檢查上一個條目有'alt'類，如果沒有，我使用.addClass('alt')。然後，我收拾通過拔斷「新」類：

if(!$('.new').prev().hasClass('alt')){ 
    $('.new').addClass('alt'); 
} 
$('.new').removeClass('new');

我敢肯定，jQuery的大師那裏能想出一個更性感的解決方案，但這似乎怎麼做我的初衷。

來源

2012-03-14 22:15:33 Jake

Live Demo

你可以嘗試只用簡單的CSS以下。

.entry:nth-child(odd){ 
    /* do some styling */ 
}

來源

2011-09-19 20:27:11 Loktar

一種方法是運行

$(".entry").filter(":odd:not(.alt)").addClass('alt');

，只要你在添加新的元素..

更準確的是通過CSS

.entry:nth-child(odd){ 
//styling of the .alt goes here 
}

這來處理這將爲新元素工作。

來源

2011-09-19 20:27:48

無論何時更新表格，您都可以調用過濾器函數。

$(document).ready(function() { 
    $('tr').filter(':odd').addClass('alt'); 

    $('#adder').click(function() { 
     $('tbody').append('<tr><td>Item 1</td><td>Item 2</td></tr>'); 
     $('tr').filter(':odd').addClass('alt'); 
    }); 
});

例子的jsfiddle：http://jsfiddle.net/Gvdcv/

來源

2011-09-19 20:31:06 GSto

應用適當的斑馬條紋圖案，用jQuery

回答

相關問題