用javascript / jquery重命名class属性的前面

Renaming the front of the class attribute with javascript / jquery

本文关键字：属性 前面 class 重命名 javascript jquery      更新时间：2023-09-26

我有一些旧的文档，仍然使用字体属性awesome v3.2.1，所有的类都有图标的名字。如果我使用新版本，如果我必须手动逐个重命名类，将非常不方便。HTML标记:

<a class="btn" href="#"><i class="icon-info-sign"></i> Info</a>
<a class="btn" href="#"><i class="icon-trash"></i> Delete</a>
<a class="btn" href="#"><i class="icon-cog"></i> Settings</a>

结果怎么会如下

<a class="btn" href="#"><i class="fa fa-info-sign"></i> Info</a>
<a class="btn" href="#"><i class="fa fa-trash"></i> Delete</a>
<a class="btn" href="#"><i class="fa fa-cog"></i> Settings</a>

任何人的帮助都是无价的

基本上你可以像这样用jquery方法switchClass 

$("a i").each(function(item){
   $(item).switchClass( "icon-info-sign", "fa fa-info-sign" );
   $(item).switchClass( "icon-trash" , "fa fa-trash" );
   $(item).switchClass( "icon-cog", "fa fa-cog" );
}

您可以这样替换类名:

var icons = document.querySelectorAll('[class^=icon]');
for (icon of icons){
  icon.classList.value = icon.classList.value.replace('icon-','fa fa-');
  console.log(icon.classList.value);
}
<a class="btn" href="#"><i class="icon-info-sign"></i> Info</a>
<a class="btn" href="#"><i class="icon-trash"></i> Delete</a>
<a class="btn" href="#"><i class="icon-cog"></i> Settings</a>

  • 选择所有类名以"icon"
    • 开头的元素
  • ……循环迭代每个图标，并将其类名替换为其中"icon-"与"fa fa-"
  • 可选console.log

我还是会用@richb01的方式:在代码编辑器中直接替换，更简洁。

相关文章：