使用jQuery删除后更新交替列表行颜色

时间:2011-02-03 17:15:52

标签: javascript jquery css3 alternating

我正在使用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选择器更符合跨浏览器(但如果您不这么想请赐教我!)。

1 个答案:

答案 0 :(得分: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');
}