jQuery add a class only if it does not have another class

Question

I have a navigation animation that is being applied to elements with the "js" class - via a css background. I don't want this animation to occur on the link for the current page (a class "current" is being echo'd out by PHP to the current page).

So basically the page your on (current page) link in the main nav will have a class of current, the others a class of js - and get the animation. How do apply that logic in a funciton? I can do it via css background but want to do it in js. Here is working js used in combination with css for desired look:

 $(function() {
    $("ul#mainNav li a").addClass("js");
        $("ul#mainNav li a").hover(
          function () {
            $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
            $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
          },
          function () {
            $(this).animate({backgroundPosition:"(0 -130px)"}, 200);

          }
        );
    });

What I'm trying to no avail:

$(function() {
    if($("ul#mainNav li a").hasClass("current")) {
    //do nothing
    } else {
    $(this).addClass("js")
    }

//rest of animation function

});

});

GolezTrol · Accepted Answer · 2011-09-23 20:58:06Z

5

$("ul#mainNav li a").not(".current").addClass("js");

Your if should work too, but you mix up this and $("ul#mainNav li a").

answered Sep 23, 2011 at 20:58

GolezTrol

116k19 gold badges185 silver badges215 bronze badges

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

4 Comments

Dirty Bird Design Over a year ago

I figured this out, slightly different then yours "$("ul#mainNav li a:not(.current)").addClass("js");" anything wrong with that?

GolezTrol Over a year ago

Nope. Fine too. I don't like those selectors to be too long, especially with the 'not' in it. So I would choose mine for readability, but it's a matter of taste.

Homer Over a year ago

is the li in the selector needed here? Or, if mainNav is the id how about $("#mainNav a:not(.current).addClass("js");

GolezTrol Over a year ago

No, you don't select #mainNav, you select links (anchors/a) within list items (li) within that element.

jfriend00 · Accepted Answer · 2011-09-23 21:00:29Z

2

There are several ways to approach this. If you need the selector you have for other things, you can do it like this:

$(function() {
    $("#mainNav li a").each(function() {
        if (!$(this).hasClass("current")) {
            $(this).addClass("js")
        }
    });

//rest of animation function
});

If you don't need that whole selector for other things, then you can do it more simply like this:

$("#mainNav li a").not(".current").addClass("js");

Note, I've removed the ul from the start of your main selector as it is not required since ids are unique.

answered Sep 23, 2011 at 21:00

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

5 Comments

Dirty Bird Design Over a year ago

jfriend00 & Chris G. is there a reason to use "!" for not over the ":not" selector? both seem to work for me...

jfriend00 Over a year ago

.not() is a function call. ! is built into the language. Use ! if appropriate for speed and size. Some situations require one or the other depending upon the actual code.

GolezTrol Over a year ago

It can help to add context (like ul) to your selector. It makes it readable for yourself, and it allows you to specify specific elements in case you reuse id's over pages. In this case, you got an li too, which (almost) implies the ul, though.

jfriend00 Over a year ago

In 99% of the cases, it just slows down the selector engine and doesn't add any functionality. In the other 1% of the cases, if you're overloading the same id name on different pages on different tag types and trying to use the tag type to target different script to different pages, then you kind of get what you have coming to you as that's just a brittle way to do it. Much better to use a master class name at a higher level to distinguish different types of pages or just use separate IDs for separate purposes. I get your readability notion, but I don't think that's worth overspecifying.

Dirty Bird Design Over a year ago

went with the "!" solution over the ":not" - thx for the explanation @jfriend00

Chris G. · Accepted Answer · 2011-09-23 21:00:17Z

1

if(! $("ul#mainNav li a").hasClass("current")) {
    $("ul#mainNav li a").addClass("js")
}

The other answer is better, but this is how your if statement would work if you insisted to do it that way. $(this) only works in the correct scope. You're confusing its usage for when you are using a closure like:

$('a').each(function(){ $(this).stuff(); });

answered Sep 23, 2011 at 21:00

Chris G.

3,9812 gold badges23 silver badges41 bronze badges

Comments

DMac the Destroyer · Accepted Answer · 2011-09-23 21:02:57Z

1

You could use the :not selector provided by jQuery to do it more succinctly:

$("ul#mainNav li a:not(.current)").addClass("js")

answered Sep 23, 2011 at 21:02

DMac the Destroyer

5,3407 gold badges39 silver badges60 bronze badges

2 Comments

Dirty Bird Design Over a year ago

exactly what I did, is there a reason to not use ":not" in favor of "!"

DMac the Destroyer Over a year ago

@jfriend00 seemed to already answer this for you in his accepted answer, but just for posterity sake, the ! wouldn't work in the selector scheme, and vise-versa. It's just a matter of context.

apeitup · Accepted Answer · 2011-11-01 01:04:25Z

For anyone looking at this to us on a live event (such as .live('click', )

 $("ul#mainNav li a").not(".current").addClass("js");

GolezTrol's '.not' answer (above) although effective usually can fall down on live events.

So I would suggest using the answer supplied by Chris G. (below)

 if(! $("ul#mainNav li a").hasClass("current")) {
  $("ul#mainNav li a").addClass("js")
 }

I hope this is useful to someone as it may save them some time trying to figure out what they have done wrong (as it was in my case)

Collectives™ on Stack Overflow

jQuery add a class only if it does not have another class

5 Answers 5

4 Comments

5 Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

5 Comments

Comments

2 Comments

Comments

Related