jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

公開日: : JavaScript ,

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法です。

よくある removeClass した後に addClass をする、ではないのでメモしておきます。

icatch-painting_mini

photo credit: Thomas Hawk via photopin cc

目次

1. removeClass → addClass が有効な場合

こういうのを検索するとかなりのサイトがヒットします。
removeClass を使って設定されているクラスを取り除いて、addClass を使って新しいクラスを設定するっていう方法を紹介してくれているサイトが多く見つかると思います。

もちろん、このやり方でも解決できるんですけど、次の点が気になりました。
「気になる」っていうか、いま解決する問題から考えると、ちょっと冗長な感じがしたので「あれ?」っと思った程度です。

  • 取り除きたいクラスを指定しなきゃいけない
  • 取り除きたいクラスが複数の場合は、その数だけ removeClass を実行しないといけない

上記が気にならないって場合は、removeClass → addClass でいいと思います。

あとは、「複数のクラスが設定されているけど、このクラスだけを置き換えたい」っていうピンポイントな場合も、このパターンでの処理になりますね。

2. 設定されているすべてのクラスを取り除いてしまう

この「取り除きたいクラス」なんですけど、一定時間で変更されるようになっているんです。
しかもランダム。

なので、removeClass("hoge") みたいに決め打ちはできません。
毎回クラス名を取得することになります。
それって面倒くさいですよね。。。

仕様は「どんなクラスが設定されていても、すべてを取り除いて新しいクラスだけに変更する」です。
別に現在設定されているクラスは知らなくていいのです。

「どんなクラスが設定されていても、すべてを取り除いて」って部分の処理は、jQuery を使うと ↓ のように書けます。

$('#hoge').removeAttr('class');

「新しいクラスだけに変更する」って部分の処理は、addClass で書けるので ↓ のようになります。

$('#hoge')..addClass(CLASS_NAME);

で、これを繋げれば完成。

$('#hoge').removeAttr('class').addClass(CLASS_NAME);

これが「どんなクラスが設定されていても、すべてを取り除いて新しいクラスだけに変更する」方法。

別に大した内容じゃないんですけどね。。。

3. まとめ

なんとでもコーディング出来るんでメモしておくような内容じゃありませんが。。。

4. その他の JavaScript に関する記事

JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-simcity_536954375_mini-thumbnail

GoogleMapsAPIを使ってMarkerを削除する方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を削除する方法に

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-darts_1543970905_mini-thumbnail

GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


5 × 九 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑