tags:

views:

93

answers:

3

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>
+1  A: 

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);
  });
});
kgiannakakis
$(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
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
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
+1  A: 

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");
James Wiseman
Forget? Never knew that that! Thanks for the tip.
jaasum
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
+6  A: 
$("#infosplashnav a").click(function () { 
  $(this).closest("ul").removeClass().addClass($(this).attr("class"));
});
Anton
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
+1 for using closest instead of parents, much faster!
Vincent Robert
Another +1 for 'closest'. Also on thinking of utilising the current object's class. Brilliant!
James Wiseman
+ 1 for the quickest way
swan