Jquery甚至奇怪的选择器不适用于动态内容

Question

通过移动元素来改变内容之后,我想为它们重新应用odd和even样式.但在这个具体的例子中,它不起作用.不幸的是我不能使用CSS:偶数和:奇数选择器(在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');
}

小提琴