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

Question

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

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

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

Jquery even odd selectors not working for dynamic content

jquery