Javascript Jquery：将类添加到每一个可见元素中

我正在尝试创建一个动态公文包库，通过单击“类别”可以隐藏显示项目。除了在单击类别时向隐藏/显示的元素添加类之外，其他一切都可以正常工作

我目前有：

$(document).ready(function() {
 $('ul.filter a').click(function() {
  $(this).css('outline','none');
  $('ul.filter .current').removeClass('current');
  $(this).parent().addClass('current');

  var filterVal = $(this).text().toLowerCase().replace(' ','-');

  if(filterVal == 'all') {
   $('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
  } else {

   $('div.portfolio').each(function() {
    if(!$(this).hasClass(filterVal)) {
     $(this).fadeOut('normal').addClass('hidden');
    } else {
     $(this).fadeIn('slow').removeClass('hidden').addClass("show");

     $('.portfolio:visible').each(function (i) {
      if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
     });

    }
   });
  }

  return false;
 });
});

这部分代码似乎有问题：

$('.portfolio:visible').each(function (i) {
                if (i % 2 == 0) $(this).addClass("last");  // This is the part that doesn't seem to work
            });

基本上，我希望在我的公文包列表中每秒钟添加一个“可见”的类

有人吗

---

CSS

---

HTML

?

---

过滤菜单

<ul class="filter"> 


                                                                    <li class="booking-systems"><a href="http://ee.dev/portfolio/category/booking-systems">Booking Systems</a></li> 



                                                                    <li class="buddypress"><a href="http://ee.dev/portfolio/category/buddypress">Buddypress</a></li> 



                                                                    <li class="cms"><a href="http://ee.dev/portfolio/category/cms">CMS</a></li> 



                                                                    <li class="content-management"><a href="http://ee.dev/portfolio/category/content-management">Content Management</a></li> 



                                                                    <li class="drupal"><a href="http://ee.dev/portfolio/category/drupal">Drupal</a></li> 



                                                                    <li class="e-commerce"><a href="http://ee.dev/portfolio/category/e-commerce">E-Commerce</a></li> 



                                                                    <li class="silverstripe"><a href="http://ee.dev/portfolio/category/silverstripe">Silverstripe</a></li> 



                                                                    <li class="wordpress"><a href="http://ee.dev/portfolio/category/wordpress">Wordpress</a></li> 


                                                                    </ul> 

您需要使用

:odd

选择器：

不确定如何在代码中实现它，但可能类似于

$（'.portfolio:odd'）

或偶数

$（'.portfolio:visible:odd'）

我马上在JSFIDLE中尝试一下

  $("tr:even").addClass("even");
  $("tr:odd").addClass("odd");

---

将产生“斑马条纹”般的效果。

那么只需稍加修改即可：

 $("tr:visible:even").addClass("even");
 $("tr:visible:odd").addClass("odd");

但每次隐藏/取消隐藏任何元素时都必须调用它。。而且你还必须在。。大概是这样的：

$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");

---

我认为你应该是个好人

过滤器菜单在哪里？：）没有在发布的HTML中看到它。这是我知道的完整代码。这不是我要找的。它必须在运行中应用于可见元素。我更改了脚本，因此每次单击链接时，所有“最后”类都将被删除，然后所有奇数可见的

。公文包
类将再次添加类
last
。（为了清晰起见，添加了红色边框，上面有一个
last
类。另外，
each（）
也不是必需的。你是一个天才！非常感谢。不过我也踢了踢自己一下：）事实上，它工作不正常。转到您的网站，单击电子商务过滤器，然后单击内容管理。红色边框将显示在左侧而不是右侧；显然，最后一个类在fadeIn仍处于活动状态时被删除/添加。我把它变成了一个回调函数，这样所有的东西都会等到所有褪色的元素都完成动画制作。
 $("tr:visible:even").addClass("even");
 $("tr:visible:odd").addClass("odd");

$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");