jQueryでの要素へのクラスの追加
HTMLコードの
class
属性には、スペースで区切って複数のクラスを
記述できることを思い出してください。
このような状況を想像してみてください -
既存のクラスを消さずに、新たなクラスを追加したい。
この場合、単純に
.attr('class', 'new-class')
とする(
attr
メソッドを利用する)ことはできません
- 属性内の既存のクラスを消してしまうからです。
もちろん、まず既存のクラスを読み取り、
それにスペースを入れて新しいクラスを追加し、
全てを属性に書き戻すことも可能ですが、
より簡単な方法があります -
jQueryではこのような操作のために
addClass
メソッドが用意されています。
addClassメソッドは、
他のクラスを消さずに要素(または複数の要素)に
クラスを追加することを可能にします。
追加したいクラスは、このメソッドのパラメータとして
渡します。
次の例では、2つのクラス -
class="www zzz" を持つ要素があります:
<p class="www zzz" id="test">text</p>
これに3つ目のクラス -
kkk を追加することができます。
結果として、属性の内容は
class="www zzz kkk" のようになります:
$('#test').addClass('kkk');
HTMLコードは以下のように見えます:
<p class="www zzz kkk" id="test">text</p>
全ての li にクラス test を追加してください。