Примените соответствующие чередования зебры к добавленным элементам DOM с помощью jQuery

Question

Я использую

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

в $(document).ready() чтобы облегчить чередование зебры с помощью класса 'entry'.

В процессе взаимодействия со страницей новые элементы DOM с классом 'entry' добавляются один за другим в конце. Я хотел бы использовать что-то похожее на вышеприведенное, чтобы убедиться, что добавленная запись имеет соответствующий цвет фона, то есть цвет, противоположный тому, который предшествовал "записи".

Я не могу придумать элегантный (или действительно любой) способ сделать это. Есть идеи? Есть ли что-то аналогичное .live() что бы применить это правило ко всем текущим и будущим матчам?

ОБНОВИТЬ

редактировать: перенесено обновление в ответ

Answer 1

Это решение не так элегантно, как отвечает CSS, но оно делает именно то, что мне нужно, без каких-либо отвлекающих побочных эффектов:

Сначала я добавлю это в конец DOM-приложения:

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

Затем у меня есть неуклюжий условный оператор, чтобы проверить, имеет ли предыдущая запись класс 'alt', и если это не так, я использую .addClass('alt'), Затем я очищаюсь, выщипывая "новый" класс:

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

Я уверен, что гуру jQuery могли бы придумать более сексуальное решение, но, похоже, это именно то, что я имел в виду.

Answer 2

Одним из способов было бы бежать

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

всякий раз, когда вы добавляете в новые элементы..

Более правильным будет справиться с этим через CSS

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

и это будет работать для новых элементов, а также..

Answer 3

Вы можете просто вызывать функцию фильтра всякий раз, когда обновляете таблицу.

$(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/

Answer 4

Live Demo

Вы можете попробовать следующее с помощью простого CSS.

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