如何使用 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 的类。因此，对于 /Map+Page url，一个类将被添加到链接标题的前 3 个字母的链接中...地图。然后，如果链接 url 有两个单词（如 /Map+Page 中），该类还将在 url 中添加第二个单词的前 3 个字母，前面是一个破折号。因此，对于 /Map+Page，要添加到此链接的类将是

class="map-pag"

或者，如果它是 /Staff+Olympics url，那么要添加的类将是......

class="sta-oly"

而且我猜如果 a:link url 中有超过 2 个单词，多余的单词会在链接中应用 CSS 类时被忽略，只关注第一个单词的前 3 个字母，后跟一个破折号，然后是第二个单词的前 3 个字母。

除此之外，我想删除<br/> 的所有实例，这些实例也默认由维基空间插入。

因此，理想情况下，我想要一个 jQuery 解决方案，将上面的 3 个 a:links 更改为此...

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

我会用 CSS 隐藏 <br /> 标签。操作 DOM 在时间和资源上都是昂贵的，所以如果你可以隐藏它们会更快。

CSS

#container br { display: none; }

其中#container 是那些a 标签的父元素。

如果你真的想使用 jQuery：

jQuery

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

同样，#container 是 a 标签列表的父级。