動的に追加する要素だと後からID名やクラス名を追加したくなることもありますよね。
例えば要素の見た目を変えるためのクラス名を一括で指定したりとか
そういう訳でjQeuryから要素にID名とかクラス名とかを付与する方法について紹介します。
要素のIDを付与する方法
まず初めはIDを動的に付与する方法についてです。
これには何を使うかというとattr関数という属性を設定するための関数を使います。
次のようにattr関数の引数に属性名、属性値を指定することでその属性の変更が可能
これを使ってID属性を変えるには属性名に 'id' 、属性値にID名を渡すだけ
例えば次がある要素のIDを変更しているコード例
|
1 |
elem.attr('id', 'hogehoge'); |
上の例だと elem のID名が hogehoge に変わります。
ちなみにセレクタではないので '#hogehoge' みたいに先頭に # は必要ありません。
実用的な使い方だと同じクラス名の要素をeachループ内で取得して連番でIDを付けるのとかに使えそう
例えば次のような感じで
|
1 2 3 4 5 6 |
$(function(){ /** hogeクラスを持つ要素に連番でID付与 */ $('.hoge').each(function(i){ $(this).attr('id', 'my_hoge_' + i); }); }); |
上の例だとhogeクラスを持つ各要素に my_hoge_1 や my_hoge_2 のような連番順にIDが割り振られます。
そして逆にID名を削除するにはremoveAttr関数を使います。
例えば次のようにID削除したい要素に対して removeAttr('id') を呼び出すだけ
|
1 |
elem.removeAttr('id'); |
jQueryにはIDを削除する専用の関数はありませんが、こちらで十分代用できます。
以上がjQueryで要素にIDを付与する方法
動的にループ内で要素を回したり追加するときにIDを規則的に付けるのに役立ちます。
要素にクラス名を付与する方法
クラス名を付与する方法はいくつかあってそれが次の２つ
- attr関数を使う方法
- addClass関数を使う方法
この両方があるのでコード例と一緒に紹介していきます。
attr関数でクラス名付与
先ほど紹介したようにクラス名もattr関数で割り振ることが可能です。
例えば次のコード例のような感じで
|
1 2 3 |
$(function(){ $('div').attr('class', 'piyo'); }); |
上のコード例だとdiv要素全てに piyo というクラス名が割り当てられます。
addClass関数でクラス名付与
jQueryにはクラス名を付けるためのaddClass関数も用意されています。
使い方は簡単で要素に指定したいクラス名を渡すだけ
|
1 |
jQuery('div').addClass('fuga'); |
上のコード例だと全てのdiv要素に fuga というクラス名が付与されます。
そしてaddClass関数で追加したクラス名はremoveClass関数で削除可能です。
例えば次がクラス名を削除しているコード例
|
1 |
jQuery('div').removeClass('fuga'); |
上のコードは単純に全てのdiv要素から fuga というクラス名を削除しているだけです。
以上がjQueryでクラス名を付与する方法
二通りの方法がありますが、クラスに関しては専用の関数であるaddClass関数を使った方がいいかもしれません。
ここまでのまとめ
ということでID名とかクラス名付与の方法をまとめると次の通り
- 要素にIDを付与
attr関数を使用する。ちなみにID削除はremoveAttr関数を使えばOK
- 要素にクラス名を付与
attr関数またはaddClass関数を使用する。クラス名削除はremoveClass関数で可能
動的に要素を追加したいときにattr関数やaddClass関数が役立つと思います。
ではでは($・・)/~~~
