JQuery even odd selectors not working for dynamic content
After changing the contents by moving elements around, I want to re-apply styles odd
and even
for them. But in this particular example, it doesn't work. Unfortunately I cannot use CSS for: even and odd selectors (not supported in IE 8). Please, help.
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
});
+3
source to share
1 answer
You will need to remove the old classes before reset, otherwise the elements will receive both classes, the first of which will accept presedence
function highlightRows() {
$('table tr td').removeClass('odd even');
$('table tr:odd td').addClass('odd');
$('table tr:even td').addClass('even');
}
+5
source to share