筛选完成后如何为每个第2个元素添加class？

看起来你在给筛选后的作品集项目添加class时遇到了麻烦，我帮你梳理下问题并给出修复方案：

问题分析 #

你的代码里已经尝试了用$( ".visible" ).filter( ":even" ).addClass( "even" )，但没生效，主要有几个原因：

• 动画时机问题：你用了show('3000')的动画效果，而添加class的代码是同步执行的，此时元素还没完全完成显示动画，visible类的元素集合可能还没正确更新。
• 选择器冗余/错误：比如$('.filter').not('.filter[filter-item="'+value+'"]')这段，你的HTML里并没有filter-item属性，属于无效选择器，会导致逻辑混乱。
• 重复DOM操作：多次对.filter元素进行removeClass、hide/show操作，会影响性能且容易导致状态不一致。

修复后的完整代码 #

<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
  <img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
  <img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
  <img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
  <img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>

// PROJECT FILTERS
$('.filter-button').click(function(){
  // 先移除所有按钮的active类，给当前按钮添加
  $('.filter-button').removeClass('active');
  $(this).addClass('active');

  var value = $(this).attr('data-filter');
  
  if(value === 'all') {
    // 显示所有项目，完成后处理偶数项
    $('.filter').show(1000, function() {
      // 先清除所有even/odd类，再给偶数项添加even类
      $('.filter').removeClass('even odd').filter(':even').addClass('even');
    });
  } else {
    // 隐藏非目标项目
    $('.filter').not('.' + value).hide(3000);
    // 显示目标项目，完成后处理偶数项
    $('.filter').filter('.' + value).show(3000, function() {
      // 先清除所有even/odd类，再给当前显示的项目里的偶数项加even类
      $('.filter').removeClass('even odd');
      $(this).filter(':even').addClass('even');
    });
  }
});

关键改进点 #

1. 动画回调处理：把添加class的逻辑放在show()的回调函数里，确保元素完全显示后再进行筛选操作，保证DOM状态正确。
2. 简化选择器：用.filter('.' + value)和.not('.' + value)替代冗余的选择器，逻辑更清晰。
3. 统一按钮状态管理：把按钮的active类处理放在click事件最开头，避免原代码中逻辑位置错误的问题。
4. 先清除旧类再添加新类：每次筛选前先移除之前的even/odd类，避免切换筛选条件时class残留。

如果你的需求是给**每第2个元素（即奇数索引，比如第2、4个）**添加class，只需要把:even换成:odd即可，因为jQuery的:even是从0开始计数的（第1个元素索引0是even，第2个索引1是odd）。

内容的提问来源于stack exchange，提问作者satsilem