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

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

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

html

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

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

attr(属性, 属性値)

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

javascript

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

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

html

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

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

javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html

		<ul id="top">
			<li>
				リスト1
				<ul>
					<li>子リスト1</li>
					<li>子リスト2</li>
					<li>子リスト3</li>
				</ul>
			</li>
			<li>リスト2</li>
			<li>リスト3</li>
		</ul>
	

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

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