THE HAM MEDIA BLOG

jQueryのSelectorsで、「:odd」や「:even」などがあるけど、
以前「jQuerの｢:even｣｢:odd｣の動作についてを詳しく」で書いたように、
jQuery1.2の時は｢:even｣｢:odd｣の動作がおかしかったが、
「jQuery1.3リリース!!Selector面の変化で速度向上!?」で書いたように、
jQuery1.3でSelectorの動作が問題なく動作するようになっていた。
ところが、ｊQuery1.3.1になって、
なんと1.2の時と同じ動作に戻ってしまった。

もう一度指定の仕方やその動作の違いをまとめておこうと思う。

今回動作を見るサンプル

サンプルとしてliが３つ入ったulを３つのサンプルを用意した。

これは以前1.2でulが複数あったときでも、
:oddや:evenはulに関わらずliの数で動作したりしていたので、
それを確かめるためでもある。

■HTMLソース

<ul>
<li>ｕｌ１　ｌｉ１</li>
<li>ｕｌ１　ｌｉ２</li>
<li>ｕｌ１　ｌｉ３</li>
</ul>
<ul>
<li>ｕｌ２　ｌｉ１</li>
<li>ｕｌ２　ｌｉ２</li>
<li>ｕｌ２　ｌｉ３</li>
</ul>
<ul>
<li>ｕｌ３　ｌｉ１</li>
<li>ｕｌ３　ｌｉ２</li>
<li>ｕｌ３　ｌｉ３</li>
</ul>

li:eq(0)

まず、li:eq(index)の動作を確認する。
これは指定した個数目のセレクタに適応させるのですが、
ulが複数あると最初のulにしか適応されないようです。

■スクリプト

$('#test1 ul li:eq(0)').css({
  color:'#FFFFFF',
  backgroundColor:'#0000FF'
});

■プレビュー

見てわかるように、ｕｌ１のｌｉ１にしか適応されていない。
ちなみにjQuery1.3の時は、全てのulに適応されていたのだが、
1.3.1では上のような動作になる。

li:eq(0)もどきをeachで指定

先ほどeqは全ulに適応されなかったが、
ulにeach()をかけて、その子要素(li)の１つめを指定するには、
下記のスクリプトにすると全ulに適応される

■スクリプト

$('#test2 ul').each(function(){
  $(this).children().eq(0).css({
    color:'#FFFFFF',
	backgroundColor:'#009900'
  });
});

■プレビュー

でもこれだと指定長くなりますね。
再びSelectorsに戻って指定方法を変えてみます。

li:first-child

■スクリプト

全ulの、liの一番目すべてに適応させるには、
「:first-child」を使うだけで全てに適応される。

$('#test3 ul li:first-child').css({
  color:'#FFFFFF',
  backgroundColor:'#FF5500'
});

■プレビュー

ちなみに、「:first」では全てに適応されない。
そしてこれは１番目にしか適応されない。
最後に適応するには「:last-child」があるが、○○番目というのにはこれは使えない。
○○番目に適応させるには他の指定が必要となる。

li:nth-child(1)

○○番目に適応させるには、「:nth-child(index)」を使う。

■スクリプト

$('#test4 ul li:nth-child(1)').css({
  color:'#FFFFFF',
  backgroundColor:'#FF0000'
});

■プレビュー

○○番目という指定のときはこれを使うのが楽だ。

li:even

おまけ、:evenだとどうなるか。

■スクリプト

$('#test5 ul li:even').css({
  color:'#FFFFFF',
  backgroundColor:'#FF00FF'
});

■プレビュー

jQuery1.3.1だと上のような状態になる。
ulそれぞれのevenではなく、全てのliに対してのevenになる。
これがjQuery1.3だと、ulそれぞれのだったのですが…
なぜ戻ったんだ〜・・・

li:nth-child(odd)

ulそれぞれに適応させるには、li:nth-child(odd)を使う。
:evenに対して、同じところに適応するのは、:nth-child(odd)。 開始位置が0番目なのか、1番目なのかで違いがでているので、
evenとoddがnth-childを使う時とそうでない時で違うことに注意。

■スクリプト

$('#test6 ul li:nth-child(odd)').css({
  color:'#FFFFFF',
  backgroundColor:'#0099FF'
});

■プレビュー

以上、簡単にまとめてみた。
以前みたいにクリック式の方がわかりやすかっただろうか…