Need to add class but only if element is visible

Question

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 http://jsfiddle.net/VCZc4/2/

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

       }            
   });

});

HTML

<ul id="selector">
    <li id="brown">button 1</a>
    <li id="green">button 2</a>
    <li id="blue">button 3</a>
    <li id="orange">button 4</a>

</ul>

<ul id="tips">
    <li class="brown">text</li>
    <li class="orange">text</li>
    <li class="blue">text</li>
    <li class="blue no-right-marg">text</li>
     <li class="blue">text</li>
     <li class="orange">text</li>
     <li class="blue">text</li>
    <li class="blue no-right-marg">text</li>
    <li class="green">text</li>
</ul>

Rey Gonzales · Accepted Answer · 2012-06-19 17:30:24Z

6

There seems to be a "." in your addClass call. Removing the "." fixes your code.

http://jsfiddle.net/reygonzales/VCZc4/5/

I hope that gets what you want.

answered Jun 19, 2012 at 17:30

Rey Gonzales

8641 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Claire Over a year ago

thanks for picking that up, it does do something but not the right thing! It adds the class, but not to every 4th element...

Rey Gonzales Over a year ago

Ok, so check my new fiddle: jsfiddle.net/reygonzales/VCZc4/10 Like Sir Jonathan Rowny says, it's zero-indexed. So I added 1 to the index before applying the modulo operator. How about now?

Claire Over a year ago

ahh so thats what zero indexed means, that it starts at 0.

Rey Gonzales Over a year ago

Oh muh gawd! My first accepted answer! Now I can finally comment on questions to clarify what the user is asking

Jonathan Rowny Over a year ago

This may be the first time I've ever been referred to as "Sir Jonathan Rowny" Ha.

Jonathan Rowny · Accepted Answer · 2012-06-19 17:43:18Z

1

It's zero-indexed, therefore mod 4 == 3 is what you need. if(index % 4 === 0 ) should be if(index % 4 === 3 )

edited Jun 19, 2012 at 17:43

answered Jun 19, 2012 at 17:32

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

2 Comments

Claire Over a year ago

thanks, I've done that but it's still not adding it to every 4th element

Jonathan Rowny Over a year ago

bah, my bad, I meant 3! index should be 3. Here's the working fiddle: jsfiddle.net/VCZc4/11

Collectives™ on Stack Overflow

Need to add class but only if element is visible

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related