jQuery: Iterating through each element with CSS class

Question

I'm trying to make a navigation bar where the current tab you're visiting has a different background color, by adding a CSS class (the "clickedNav" class). I have a loop to iterate through and remove the color (so only the current tab is highlighted), and then I add the color to the clicked link. Right now, it's adding the class (clickedNav) successfully, but my loop to remove them beforehand isn't removing them (I'm seeing lots of "HEYS", but no "yup"s). Here's the relevant code:

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($('.navlink').hasClass('.clickedNav')){
            console.log("yup");
            $('.navlink').removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    event.stopPropagation();
});

What am I doing wrong?

EDIT: Thanks for the help folks. See scrblndr3's response for the fix to my code as posted, and Pinpickle's response for a more efficient resolution.

Pinpickle · Accepted Answer · 2014-01-10 03:13:39Z

4

No need for the .each function, just use the selector to your advantage (and take the "." out of the removeClass as scrblnrd3 said)

$('.navlink.clickedNav').removeClass('clickedNav');

This way, the function would only be performed on those elements that have the class (though you could just use '.navlink' as the selector and it will do the exact same thing)

answered Jan 10, 2014 at 3:13

Pinpickle

1,0542 gold badges11 silver badges18 bronze badges

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

Comments

scrblnrd3 · Accepted Answer · 2014-01-10 03:11:01Z

3

You have a couple of problems. Firstly, in your hasClass, you are putting your classes with a dot in front of them. That's unnecessary. Secondly, you have defined your event has e, but you're using it as event. Thirdly, you should use $(this) in your .each()

This should fix the problem

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($(this).hasClass('clickedNav')){ //No need for a period
            console.log("yup");
            $(this).removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    e.stopPropagation();
});

answered Jan 10, 2014 at 3:11

scrblnrd3

7,4349 gold badges36 silver badges65 bronze badges

3 Comments

Ken Herbert Over a year ago

That still won't work properly. Within the .each() loop you are still referencing the entire $('.navlink') collection when testing for the class, you need to use $(this) while within the loop to only test the current item.

scrblnrd3 Over a year ago

@winterblood whoopsies

Ber Over a year ago

Thanks scrblnrd3 for the fast and informative response! I changed the code and it works great now.

Collectives™ on Stack Overflow

jQuery: Iterating through each element with CSS class

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related