jQueryで指定した要素にclass,idを追加する

id、classを割り当てるためのメソッド

次のような構造のhtmlがあるとします。

1
<ul>
2
  <li>リスト1</li>
3
  <li>リスト2</li>
4
  <li>リスト3</li>
5
  <li>リスト4</li>
6
  <li>リスト5</li>
7
</ul>

たとえば、ulに「style-ul」というidを、liには「style-li」というclassを割り当てるとします。
「attr」メソッドを使用すれば、属性の追加や値を設定することができます。

attr(属性, 属性値)

idを割り当てるには、属性の部分に「id」を属性値には「style-ul」とします。

1
$(function(){
2
  $('ul').attr('id', 'style-ul');
3
  $('li').attr('class', 'style-li');
4
}

実行結果は次のようになります。

1
<ul id="style-ul">
2
  <li class="style-li">リスト1</li>
3
  <li class="style-li">リスト2</li>
4
  <li class="style-li">リスト3</li>
5
  <li class="style-li">リスト4</li>
6
  <li class="style-li">リスト5</li>
7
</ul>

class、idともに「attr」メソッドを使用しましたが、classを追加するには他に「addClass」という専用のメソッドもあります。
次のようにしても同じ結果を得ることができます。

1
$('li').addClass('style-li');

classを追加する場合こちらの方がわかりやすいですね。

最初と最後の要素だけクラスを追加する。

前回はli要素全てにclassを追加してましたね。
リストの最初だけclassを追加したい場合「:first」セレクタを使用します。

1
$('li:first').addClass('style-li');

逆にリストの最後に追加したい場合は「:last」セレクタを使用します。

1
$('li:last').addClass('style-li');

要素番号を指定してクラスを追加する。

2番目とか3番目にclassを追加したい場合はどうなるでしょうか。
そんなときは「eq」を使用します。

1
$('li').eq(1).addClass('style-li');

「eq」の引数は0から始めるので、2の場合は1を3の場合は2を入れます。

奇数・偶数の要素だけクラスを追加する。

偶数の場合は「even」、奇数の場合は「odd」セレクタを使用します。

1
$('li:even').addClass('style-li');

連番でクラスを追加する。

「style-li01」「style-li02」…など連番でクラスを追加したいときがあります。
「each」で要素の数だけループさせることができます。

1
var i = 1;
2
$('li').each(function(){
3
  $(this).addClass('style-li'+i);
4
  i++;
5
});

直下の要素だけクラスを追加する。

次のようにリストの下にさらにリスト要素があったとします。

1
<ul id="top">
2
  <li>
3
    リスト1
4
    <ul>
5
      <li>子リスト1</li>
6
      <li>子リスト2</li>
7
      <li>子リスト3</li>
8
    </ul>
9
  </li>
10
  <li>リスト2</li>
11
  <li>リスト3</li>
12
</ul>

子要素のliにはclassを割り当てたくない場合（#top直下のliのみ）は次のようになります。

1
$('#top>li').addClass('style-li');