过滤器运行后如何将类添加到每个第二个元素

时间:2018-01-08 09:14:01

标签: jquery twitter-bootstrap

所以我为我的filtred组合运行这个代码,我需要在过滤结果的每个第二个元素中添加class。这是我到目前为止所尝试的(没有运气)。好的,我知道这很简单,但有些我不能让它发挥作用!

HTML

<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>

JQUERY

// PROJECT FILTERS

$('.filter-button').click(function(){
var value = $(this).attr('data-filter');

if(value == 'all')
{
$('.filter').show('1000');
}
else
{

$('.filter').filter('.'+value).removeClass('even').removeClass('odd').removeClass('visible');


$('.filter').not('.'+value).hide('3000');
$('.filter').not('.filter[filter-item="'+value+'"]').removeClass('visible');

$('.filter').filter('.'+value).show('3000');
$('.filter').filter('.'+value).addClass('visible');

$( ".visible" ).filter( ":even" ).css( "background-color", "red" );
//$( ".visible" ).filter( ":even" ).addClass( "even" );

}
});

if ($('.filter-button').removeClass('active')) {
$(this).removeClass('active');
}
$(this).addClass('active');

代码用于上面的示例 https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category

感谢Advane的意见和帮助

1 个答案:

答案 0 :(得分:1)

这可以从下面的按钮运行:运行代码段

someValue