Обновление цвета строки чередующегося списка после удаления с помощью jQuery

Question

Я использую jQuery для чередования цветов фона и добавления радиусов к некоторым неупорядоченным элементам списка, например так:

// Alternate row colors for group listing and add top/bottom radii
$('li.groupList:even').css({backgroundColor: '#e4e4e4'});
$('li.groupList:odd').css({backgroundColor: '#ededed'});
$('li.groupList:first').addClass('rtm');
$('li.groupList:last').addClass('rbm');

Однако, если я удаляю один из элементов списка, используя фактический метод remove(),цвета и радиусы не обновляются.

// Remove group members
$("[id^='removeGroupMember_']").click(function () {
    $(this).parent().slideUp("fast", function () {
        $(this).remove();
    });
});

Это потому, что браузер не получает уведомления об изменении массива списка, или это то, что я должен просто делать, используя только CSS (т.е. используя li.groupList:nth-child(even) и т. Д.)?

Причина, по которой я использовал jQuery для начала, заключалась в том, что я предполагал, что она совместима с несколькими браузерами больше, чем селекторы CSS3 (но, пожалуйста, просветите меня, если вы думаете иначе!).

Answer 1

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

function update() {
    var l = $('li.groupList').removeClass('rtm rbm').removeAttr('backgroundColor');

    l.filter(':even').css({backgroundColor: '#e4e4e4'});
    l.filter(':odd').css({backgroundColor: '#ededed'});
    l.first().addClass('rtm');
    l.last().addClass('rbm');
}