HOME > > > > >

.addClass()

.addClass( className )

引数

(String)className
設定するclass属性の値

戻り値

jQuery
jQueryオブジェクト

jQueryオブジェクトが持つDOM要素にclass属性を設定する。

サンプル

実行結果

  • 設定なし
  • class="test"
  • class="addclass"

addClass('addclass')実行後

Javascript

  1. var has_classname = '';
  2. $('.jqTest1 li').addClass('addclass').each(function(){
  3.     has_classname += $(this).attr('class') + '<br />';
  4. }).closest('.jqTest1').append(has_classname);

HTML

  1. <div class="jqTest1">
  2.     <ul>
  3.     <li>設定なし</li>
  4.     <li class="test">class=&quot;test&quot;</li>
  5.     <li class="addclass">class=&quot;addclass&quot;</li>
  6.     </ul>
  7.     <hr />
  8.     <p>addClass('addclass')実行後</p>
  9. </div>

.addClass( function(index, currentClass) )

引数

(int) index
対象DOMのjQuerryオブジェクト内でのインデックス
(string) currentClass
対象DOMの現在のクラス名

戻り値

jQuery
jQueryオブジェクト

サンプル

li要素にclass="addclass"を設定する。ただし同名のクラスを持っていた場合、追加ではなく削除してsuperAddClassというクラス名を設定する。

実行結果

  • 設定なし
  • class="test"
  • class="addclass"

addClass('addclass')実行後

Javascript

  1. var has_classname = '';
  2. $('.jqTest2 li').addClass(function(index, currentClass){
  3.     if (currentClass === 'addclass') {
  4.         $(this).removeClass();
  5.         return 'superAddClass';
  6.     }
  7.     return 'addclass';
  8. }).each(function(){
  9.     has_classname += $(this).attr('class') + '<br />';
  10. }).closest('.jqTest2').append(has_classname);

HTML

  1. <div class="jqTest2">
  2.     <ul>
  3.     <li>設定なし</li>
  4.     <li class="test">class=&quot;test&quot;</li>
  5.     <li class="addclass">class=&quot;addclass&quot;</li>
  6.     </ul>
  7.     <hr />
  8.     <p>addClass('addclass')実行後</p>
  9. </div>