Swapping classes on click with jQuery, by using elements class

Question

I have written this simple bit of jQuery that swaps out the containing ul's class based on which contained anchor is clicked. It's working fine, but, I know this is messy. I was wondering if someone could point out a way to do this same effect without having to manually enter each class name. I am just a jQuery newb and am looking to learn more about it.

I imagine the there is a jQuery function I could write that wouldn't involve manually inserting every class name, but one that could just take the anchor tag's class and slap it onto the ul.

The jQuery

$("#infosplashnav a.news").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("news");
});
$("#infosplashnav a.communitylife").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("communitylife");
});
$("#infosplashnav a.youth").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("youth");
});

The HTML

<ul id="infosplashnav" class="news">
     <li><a href="#news" class="news">News &amp; Events</a></li>
     <li><a href="#communitylife" class="communitylife">Community Life</a></li>
     <li><a href="#youth" class="youth">Youth</a></li>
</ul>

score 6 · Accepted Answer · answered Dec 16 '09 at 09:23

6

$("#infosplashnav a").click(function () { 
  $(this).closest("ul").removeClass().addClass($(this).attr("class"));
});

answered Dec 16 '09 at 09:23

Anthony Serdyukov

4,268
4
31
37

This is exactly what I was looking for, never new about .closest or using .attr in that way. Thanks! Works like a charm and makes a ton of sense. – jaasum Dec 16 '09 at 09:33
Another +1 for 'closest'. Also on thinking of utilising the current object's class. Brilliant! – James Wiseman Dec 16 '09 at 11:02

score 1 · Answer 2 · answered Dec 16 '09 at 08:55

1

You could do something like this:

classNames = ["news", "communityLife", "youth"];

$.each(classNames, function(n, className) {
  $("#infosplashnav a." + className).click(function () { 
    $(this).parents("ul:eq(0)").removeClass();
    $(this).parents("ul:eq(0)").addClass(className);
  });
});

answered Dec 16 '09 at 08:55

kgiannakakis

103,016
27
158
194

$(this).parents("ul:eq(0)").removeClass(); $(this).parents("ul:eq(0)").addClass(className); this 2 lines can be $(this).parents("ul:eq(0)").removeClass().addClass(className);, learnt a good technique from u, vp foru :-) – Wondering Dec 16 '09 at 09:02
That seems like it's just doing the same thing a different way. Any ideas on how to get it to grab the class name of #infosplashnav a automatically and then apply that to the #infosplashnav? – jaasum Dec 16 '09 at 09:14
See this question http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery. This is not straightforward, because an element can have more than one classes. – kgiannakakis Dec 16 '09 at 10:03

score 1 · Answer 3 · answered Dec 16 '09 at 09:01

1

Don't forget you can use chaining as well, so

$(this).parents("ul:eq(0)").removeClass();  
$(this).parents("ul:eq(0)").addClass("news");

Can become:

$(this).parents("ul:eq(0)").removeClass().addClass("news");

answered Dec 16 '09 at 09:01

James Wiseman

29,946
17
95
158

Forget? Never knew that that! Thanks for the tip. – jaasum Dec 16 '09 at 09:13
Yes, certain functions return the object that is calling them, this means you can chain them together. There are also functions end() and andSelf() that help you reference other items in the chain. – James Wiseman Dec 16 '09 at 11:00

Swapping classes on click with jQuery, by using elements class

3 Answers3