How can I add and remove a class on links using jQuery?

Question

Let me give a better description of exactly what I'm wanting to do here. I'm using Wikispaces, and by default, when a user adds a new page link to the side navigation bar, wikispaces inserts either one of two classes: wiki_link or wiki_link_new. Here's what it looks like...

<a href="/Map+Page" class="wiki_link">Map Page</a><br/>
<a href="/Staff+Olympics" class="wiki_link">Staff Olympics</a><br/>
<a href="/Staff+Meetings" class="wiki_link_new">Staff Meetings</a><br/>

I'd like to automatically remove both classes (wiki_link and wiki_link_new), and add a class to the link that better represents the page url. So, for /Map+Page url, a class would be added to the link that is the first 3 letters of the link title... map. And then, if the link url has two words (as in /Map+Page), the class would also add the first 3 letters of the second word in the url, preceded by a dash. So, for /Map+Page, the class to be added to this link would be

class="map-pag"

Or, if it was the /Staff+Olympics url, the class to be added would be...

class="sta-oly"

And I guess if there were more than 2 words within the a:link url, the excess words would be ignored in regards to applying a CSS class to the link, only paying attention to the first 3 letters of the first word, followed by a dash, and then followed by the first 3 letters of the second word.

And on top of all of that, I'd like to remove all instances of <br/>, which are also inserted by default by wikispaces.

So ideally, I'd like a jQuery solution that would change the 3 a:links above to this...

<a href="/Map+Page" class="map-pag">Map Page</a>
<a href="/Staff+Olympics" class="sta-oly">Staff Olympics</a>
<a href="/Staff+Meetings" class="sta-mee">Staff Meetings</a>

Not sure if my class naming conventions are the best. So if you have a better suggestion, I'd love to hear it! :)

Thanks for any help you can provide!

Answer 1

This should do what you want:

// Select the links, and remove their classes
$(".wiki_link, .wiki_link_new").attr('class','').each(function(){
    var className = $(this).attr('href').substr(1).toLowerCase().split('+').slice(0,2).join('-');
    $(this).addClass(className);
});

I would just hide the <br /> tags with CSS. Manipulating the DOM is expensive in time and resources, so if you can just hide them it would be faster.

CSS

#container br { display: none; }

Where #container is whatever element is the parent of those a tags.

If you really want to use jQuery:

jQuery

$("#container br").remove();

Again, where #container is the parent of the list of a tags.