jquery - eq() 选择每 4 个类别

标签 jquery

我想使用 eq() 选择每第四个项目来添加一个类以将右边距归零。我得到了一组混合产品,其中有一个可以打开和关闭产品的子导航。

nth() 不起作用,因为即使选择了 display:none 且选择了特定类别,它也会对所有产品进行计数。

Jquery

$('li.prod').toggle(true);

<p>$('li.prod:visible:nth-child(4n)').addClass('prod-end');</p> <p>$('li.button').click(function () {</p> <pre><code>$('li.button').removeClass('active'); $(this).addClass('active'); $('li.prod').removeClass('prod-end'); if ( $('li#all').hasClass('active')) { $('li.prod').toggle(true); $('li.prod:visible:nth-child(4n)').addClass('prod-end'); } else { $('li.prod').toggle(false); $('li.' + $(this).text()).toggle(true); $('li.' + $(this).text() + ':visible:nth-child(4n)').addClass('prod-end'); } </code></pre> <p>});</p>

HTML

<pre><code> <div class="subNav"> <ul> <li class="button active" id="all">all</li> <li class="button" id="men_apparel">men</li> <li class="button" id="women_apparel">women</li> <li class="button" id="kids">kids</li> </ul> </div> <div class="products"> <ul class="products_wrapper"> <li class="prod women"> </li> <li class="prod women"> </li> <li class="prod women"> </li> <li class="prod women"> </li> <li class="prod men"> </li> <li class="prod men"> </li> <li class="prod men"> </li> <li class="prod kids"> </li> <li class="prod kids"> </li> <li class="prod kids"> </li> <li class="prod kids"> </li> </ul> </div> </code></pre>

提前致谢!

最佳答案

    $('.products_wrapper li').each(function(){
        var i = $(this).index()+1;
        if (i%4==0) {
            $(this).addClass('prod-end');
        };
    });

关于jquery - eq() 选择每 4 个类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6599247/

相关文章:

javascript - Jquery 根据选中的复选框获取正确的值

jquery悬停列表背景

javascript - 为什么 jQuery.cookie 插件返回 “[object Object]”

javascript - jQuery 图像交换 if-else 语句不起作用

javascript - 从 onclick 调用时 $.ajax 不工作

javascript - 基于 Web 的圆形界面前端 - 无图形!

jquery - 如何使用 yii 以持久的方式显示基于下拉列表的动态代码?

jquery - ReCAPTCHA找不到用户提供的函数: myCallBack

javascript - 带有选择和输入的 jQuery/Javascript 表过滤器

c# - Razor 中的下拉绑定(bind) onchange 方法