[jQuery]find()メソッドで偶数(奇数)の要素を取得するサンプル

以下の様に複数のul要素があるhtmlの構成で、それぞれのulごとに内包するli要素の偶数番目(0から数えて)にclassを付けたかったので、jQueryのevenセレクタを使ってやってみました。

サンプルコード

html

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ul>
	<li>4</li>
	<li>5</li>
</ul>
<ul>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>
<ul>
	<li>11</li>
</ul>

css

.red{
	color: red;
}

jQuery

jQuery(function(){
	jQuery('ul').find('li:even').addClass('red');
});

以下に挙げる失敗例のように、findセレクタ無しだとul要素ごとじゃなく、全部のli要素を合算した上で偶数にclassを付けてしまいます。

findセレクタを使うと意図どおりにclassがつきました。
find()は指定した要素の「子孫」要素でセレクタにマッチする要素を選択することができます。

jQuery失敗例

jQuery(function(){
	jQuery('ul li:even').addClass('red');
});

※ちなみに、0から数えて奇数番目にclassを付けたい場合はoddセレクタを使います。

demo

※上記コードの実行結果を閲覧できます。
demo-find.html

参考：jQuery リファレンス：find