jQueryでHTML要素のclassやidを操作する

HTMLタグのクラスやIDを取得したり削除したりしたいときがあるかと思います。それらのまとめになります。

Class

クラスの場合は複数指定できることを考慮しなくてはなりません。また、CSSなどで指定しているクラスを変更してしまうとそれも反映されるので、意図しないレイアウトになってしまう可能性があります。逆に言えば、それを利用してON/OFFのデザイニングすることができます。

HTMLの例

<div id="SmpID" class="SmpClass1 SmpClass2">&nbsp;</div>

Classの取得

jQueryにおいて属性値の取得で特に役立つのが「attr()」です。指定した属性値返してくれるほか、第2引数に値を入れれば、第1引数で指定した属性を第2引数の値にすることができます。
クラスの場合は複数の場合があるので少し複雑です。

1行目の段階では「ClassStr」には「SmpClass1 SmpClass2」が格納されます。2つとも入っていることに注意が必要です。ClassArrには配列としてそれぞれのクラスが格納されています。

要素にClassの追加

ある要素にクラスを追加する場合は「addClass()」を使います。一番最初のタグにクラスを付け加えたり、奇数のtrにクラスを加えたり、要素の指定によって使い方はいろいろです。

要素から指定したClassを削除

逆にクラスを削除する場合は「removeClass()」を使います。例えばナビゲーションのクリックした要素のみ「On」を付けてそれ以外は削除したい場合などは、「$(this).addClass(‘On’)」「$(‘#nabi a’).not(this).removeClass(On);」などような使い方を私はよくしています。

Classがあるかどうかチェック

要素がクラスを持っている場合にtrueを返します。例ではif文で利用していますが、「$(‘#SmpID’).hasClass(‘SmpClass1’).text(‘SmpClass1を持っています’);」のように1行でもクラスを持っている場合のみの処理をすることができます。

ID

IDは1つのページにつき１つが原則なので、jQueryにおいてIDによる指定が早いという記事を見たことがあります。ユニークな位置づけですので、要素のIDが変わるというのは変な気もしますが、一応以下に書いていきたいと思います。

HTMLの例

先ほどと同じHTMLの記述です。
<div id="SmpID" class="SmpClass1 SmpClass2">&nbsp;</div>

IDの取得

IDの取得は「attr(‘id’)」で取れるのでシンプルです。例ではdivをクリックした際にそのIDをアラートするものですが、このように関数の中で「$(this)」からIDをとりたいときの方が多いような気がします。

要素にIDを指定

どのような時に使うかはあまりわかりませんが、これも「attr()」に第2引数を入れることで、任意のIDを指定することができます。

要素から指定したIDを削除

IDを削除したいときは、arrt(‘id’,”)ではなく、「removeAttr(“id”)」の方がいいかもしれません。