2016-08-30 6 views
0

フォント属性を使用している古い文書では、すべてのクラスのアイコンの名前がv3.2.1です。私が新しいバージョンを使用する場合は、クラス名を手動で1つずつ変更しなければならないと非常に不便です。 HTMLマークアップ:javacript/jqueryでクラス属性の先頭の名前を変更

<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> 
以下のような結果

は誰からもヘルプは非常に貴重な

+0

これまでに試したコードをいくつかお見せできますか? –

+3

エディタの検索機能と置換機能を試しましたか?私は "アイコン"の代わりに "fa fa"と置き換えて検索してください。良いエディタであればこれを行うことができます。 – richb01

+1

ファイル全体のテキストエディタで検索と置換が最適なソリューションのように思えます...ブラウザで行うのは、コンテンツの点滅を引き起こすため、悪い考えです。 – epascarello

答えて

0
のようにjqueryのメソッド switchClassでそれを行うことができます

このようにクラス名を置き換えることができます:

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>

  • 各アイコンを反復し、"fa fa-"
  • "icon-"どこでそのクラス名を交換するために...ループの "icon"
  • で始まるクラス名を持つすべての要素を選択します
  • オプションconsole.log

私はまだ@ richb01のやり方をしています:&を見つけると、コードエディタに直接置き換えられます。

+0

@ yuriy636を試してみました。それは実際に私が期待したものと同じです。正確な回答をお寄せいただきありがとうございます –

1

だろうことができます基本的に、あなたがその

$("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"); 
} 
+0

それでもクラス名を@ÖzgürErsilという名前で書く必要があります。多くのページで、クラス名を一つずつ見つけ出す必要があります。 –

関連する問題