Как добавить и удалить класс по ссылкам с помощью jQuery?

Question

Позвольте мне лучше описать, что именно я хочу здесь сделать. Я использую Wikispaces, и по умолчанию, когда пользователь добавляет новую ссылку на страницу на боковой панели навигации, wikispaces вставляет либо один из двух классов: wiki_link или wiki_link_new. Вот как это выглядит ...

<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/> 

Я хотел бы, чтобы автоматически удалить оба класса (wiki_link и wiki_link_new), и добавить класс к ссылке, которая лучше представляет URL страницы. Итак, для URL/карты + страницы, класс будет добавлен к ссылке, которая является первыми тремя буквами названия ссылки ... map. И тогда, если URL-адрес ссылки имеет два слова (как в/Map + Page), класс также добавит первые 3 буквы второго слова в URL-адресе, которому предшествует тире. Таким образом, для/Карта + Страница, класс должен быть добавлен к этой ссылке будет

class="map-pag" 

Или, если это был URL/Персонал + Олимпиада, класс должен быть добавлен бы ...

class="sta-oly" 

И я думаю, если бы в URL-адресе a: link было больше двух слов, лишние слова были бы проигнорированы в отношении применения класса CSS к ссылке, обращая внимание только на первые 3 буквы первого слова , затем тире, а затем следуют первые 3 буквы второго слова.

И, кроме всего прочего, я хотел бы удалить все экземпляры <br/>, которые также по умолчанию вставлены wikispaces.

Так в идеале, я хотел бы решение JQuery, что бы изменить 3: с ссылкой выше этого ...

<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> 

Не уверен, что если мое именование классов являются лучшими. Поэтому, если у вас есть лучшее предложение, я бы хотел это услышать! :)

Спасибо за любую помощь, которую вы можете предоставить!

Answer 1

Это должно делать то, что вы хотите:

// 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); 
}); 

Я бы просто скрыть <br /> теги с помощью CSS. Манипулирование DOM является дорогостоящим по времени и ресурсам, поэтому, если вы можете просто спрятать их, это будет быстрее.

CSS

#container br { display: none; } 

Где #container является то, что элемент является родителем этих a тегов.

Если вы действительно хотите использовать JQuery:

JQuery

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

Снова, где #container является родительским списка a тегов.