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

class="map-pag"

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

class="sta-oly"

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

最重要的是，我想删除
的所有实例，这些实例也是维基空间默认插入的。

所以理想情况下，我想要一个 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 隐藏
标签。操作 DOM 需要花费大量时间和资源，因此如果您可以隐藏它们，速度会更快。

CSS

#container br { display: none; }

其中#container 是这些a 标记的父元素。

如果您确实想使用 jQuery：

jQuery

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

同样，其中 #container 是 a 标记列表的父级。