Question

我想使用eq（）来选择每个第4项来添加一个类以使右边距为零。我得到了一套混合产品，其中有一个子导航可以切换产品。

nth（）不起作用，因为即使display：none和选择了特定的类，它也会计算所有产品。

Jquery的

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



$('li.prod:visible:nth-child(4n)').addClass('prod-end');

$('li.button').click(function () {

$('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');

        }


});

$('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'); }

HTML

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

提前致谢！

Answer 1

怎么样

$('.foo:visible:nth-child(4)')

Answer 2

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

Answer 3

我认为你可能不得不使用each来处理一些可能被隐藏的事实：

$("ul li:visible").each(function(i, el){
    if(i%4 === 3){
        $(this).addClass("prop_end");
    }
});

http://jsfiddle.net/RjbVV/2/

Answer 4

更改

$('li.prod:eq(4n)').addClass('prod-end');

到

$('li.prod:nth-child(4n)').addClass('prod-end');

小提琴：http://jsfiddle.net/KuMzp/

或者这是你的意思吗？

小提琴：http://jsfiddle.net/yuU9j/

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

$('li.prod:nth-child(4n)').addClass('prod-end');

$('li.button').click(function() {
    $('li.button').removeClass('active');
    $(this).addClass('active');
    $('li.prod').removeClass('prod-end');
    if ($('li#all').hasClass('active')) {
        $('li.prod').toggle(true);
        $('li.prod:nth-child(4n)').addClass('prod-end');
    } else {
        $('li.prod').toggle(false);
        $('li.' + $(this).text()).toggle(true);
        $('li.' + $(this).text()).eq(3).addClass('prod-end');
    }
});

Answer 5

下面：

DEMO

$("ul li:nth-child(4n)").addClass("prop-end");

eq（）选择每个第4课

5 个答案: