eq() to select every 4th class
<p>I want to use eq() to select every 4th item to add a class to zero the right margin. I got a mixed set of products which has a sub nav that toggles on and off products.</p>

<p>The nth() won't work because it counts all the products even when display:none and a specific class is selected.</p>

<p>Jquery</p>

<p><code>
$('li.prod').toggle(true);</p>

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

<p></code></p>

<pre><code>HTML
</code></pre>

<p><code></p>

<pre><code>    &lt;div class="subNav"&gt;
            &lt;ul&gt;
              &lt;li class="button active" id="all"&gt;all&lt;/li&gt;
              &lt;li class="button" id="men_apparel"&gt;men&lt;/li&gt;
              &lt;li class="button" id="women_apparel"&gt;women&lt;/li&gt;
              &lt;li class="button" id="kids"&gt;kids&lt;/li&gt;
            &lt;/ul&gt;
     &lt;/div&gt;

&lt;div class="products"&gt;
        &lt;ul class="products_wrapper"&gt;

         &lt;li class="prod women"&gt;      
&lt;/li&gt;
&lt;li class="prod women"&gt;      
&lt;/li&gt;
&lt;li class="prod women"&gt;      
&lt;/li&gt;
&lt;li class="prod women"&gt;      
&lt;/li&gt;
&lt;li class="prod men"&gt;      
&lt;/li&gt;
&lt;li class="prod men"&gt;      
&lt;/li&gt;
&lt;li class="prod men"&gt;      
&lt;/li&gt;
&lt;li class="prod kids"&gt;      
&lt;/li&gt;
&lt;li class="prod kids"&gt;      
&lt;/li&gt;
&lt;li class="prod kids"&gt;      
&lt;/li&gt;
&lt;li class="prod kids"&gt;      
&lt;/li&gt;   
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p></code></p>

<p>Thanks in advance!</p>
