我有以下代码,它根据添加到 li 元素的类来过滤列表。当所有项目都显示时,斑马条纹工作正常,但当您过滤并假设其中一个列表项目被隐藏时,斑马条纹就会不同步。有办法解决这个问题吗?
我已经检查了这篇文章,但 ie 不起作用 jQuery Table Zebra Striping with hidden rows
谢谢。
//Filter
$("#local-clubs-list li:visible:even").addClass("even");
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
$('ul#local-clubs-list li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
$("#local-clubs-list li").removeClass("even");
$("#local-clubs-list li:visible:nth-child(even)").addClass("even");
});
return false;
});
$('ul#filter a:eq(0)').trigger('click');
我在 firbug 中看到的是
<li class="northern even">
<li class="northern">
<li class="north-dublin hidden even" style="display: none;">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">
最佳答案
由于某种原因隐藏不能很好地工作,我不得不添加和删除类。这是有效的最终代码。
//Filter
function zebraRows(selector, className)
{
$(selector).removeClass(className).addClass(className);
}
$('#local-clubs-list li').addClass('visible');
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
$('ul#local-clubs-list li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
$(this).fadeOut('normal').removeClass('visible');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
$('#local-clubs-list li').removeClass('even');
zebraRows('#local-clubs-list .visible:even', 'even');
$('#local-clubs-list li').addClass('visible');
return false;
});
$('ul#filter a:eq(0)').trigger('click');
关于jquery - 添加斑马条纹但忽略隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7739471/