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-darts_1543970905_mini-thumbnail

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

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

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

icatch-load_6161289029_mini-thumbnail

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

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

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-switch_mini

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

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

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

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

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

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-template_mini

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

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

記事を読む

Googleアドセンス用(PC)

Message

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


1 + = 六

次の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 ↑