Jquery 奇偶选择器不适用于动态内容

Question

通过移动元素来更改内容后，我想为它们重新应用奇数和偶数样式。但在这个具体的例子中，它不起作用。不幸的是，我无法将 CSS 用于 :even 和 :odd 选择器(IE 8 不支持)。请帮忙。

http://jsfiddle.net/rghg3j5v/

function highlightRows() {
    $('table tr:odd td').addClass('odd');
    $('table tr:even td').addClass('even');
}

highlightRows(); // Initial styling

$('.up').click(function() {
    var parent = $(this).parents('tr');
    var prev = $(parent).prev();

    $(parent).insertBefore(prev);
    highlightRows(); // Re-apply style when element is moved
});

$('.down').click(function() {
    var parent = $(this).parents('tr');
    var next = $(parent).next();

    $(parent).insertAfter(next);
    highlightRows(); // Re-apply style when element is moved
});

Answer 1

您必须删除旧的类才能重置，否则元素最终会同时具有两个类，第一个类占主导地位

function highlightRows() {
    $('table tr td').removeClass('odd even');
    $('table tr:odd td').addClass('odd');
    $('table tr:even td').addClass('even');
}

FIDDLE