Need to add class but only if element is visible
<p>I need to remove all classes of 'no-right-marg' on all #tips li elements.  I then need to hide all those elements with a class of the clicked element's ID.  Then, I need to check which elements are still being displayed and add a class of 'no-right-marg' to every fourth one.  My code below isn't working.  Please see my jsfiddle <a href="http://jsfiddle.net/VCZc4/2/" rel="nofollow">http://jsfiddle.net/VCZc4/2/</a></p>

<pre><code>jQuery('#selector li').click(function() {

   colour = '.' + jQuery(this).attr('id');
   jQuery('#tips ' + colour).toggle();
   jQuery(this).toggleClass('inactive');
   jQuery('#tips li').removeClass('no-right-marg');

   jQuery('#tips li:visible').each(function(index){

       if(index %4===0 ){// if divisible by 4
           jQuery(this).addClass('.no-right-marg');

       }            
   });

});​
</code></pre>

<p>HTML</p>

<pre><code>&lt;ul id="selector"&gt;
    &lt;li id="brown"&gt;button 1&lt;/a&gt;
    &lt;li id="green"&gt;button 2&lt;/a&gt;
    &lt;li id="blue"&gt;button 3&lt;/a&gt;
    &lt;li id="orange"&gt;button 4&lt;/a&gt;

&lt;/ul&gt;

&lt;ul id="tips"&gt;
    &lt;li class="brown"&gt;text&lt;/li&gt;
    &lt;li class="orange"&gt;text&lt;/li&gt;
    &lt;li class="blue"&gt;text&lt;/li&gt;
    &lt;li class="blue no-right-marg"&gt;text&lt;/li&gt;
     &lt;li class="blue"&gt;text&lt;/li&gt;
     &lt;li class="orange"&gt;text&lt;/li&gt;
     &lt;li class="blue"&gt;text&lt;/li&gt;
    &lt;li class="blue no-right-marg"&gt;text&lt;/li&gt;
    &lt;li class="green"&gt;text&lt;/li&gt;
&lt;/ul&gt;
​
</code></pre>
