THE HAM MEDIA BLOG

○○番目の○○という指定をするjQueryの「:eq(index)」や「:odd」などの動作について。再びバグ!?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
Selectors

あれ?前の動作に戻った!?

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

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



今回動作を見るサンプル

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

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

■HTMLソース

<ul>
<li>ul1 li1</li>
<li>ul1 li2</li>
<li>ul1 li3</li>
</ul>
<ul>
<li>ul2 li1</li>
<li>ul2 li2</li>
<li>ul2 li3</li>
</ul>
<ul>
<li>ul3 li1</li>
<li>ul3 li2</li>
<li>ul3 li3</li>
</ul>

li:eq(0)

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

■スクリプト

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

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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

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

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

■スクリプト

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

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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

li:first-child

■スクリプト

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

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

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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

li:nth-child(1)

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

■スクリプト

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

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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

li:even

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

■スクリプト

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

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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'
});

■プレビュー

  • ul1 li1
  • ul1 li2
  • ul1 li3
  • ul2 li1
  • ul2 li2
  • ul2 li3
  • ul3 li1
  • ul3 li2
  • ul3 li3

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。