QA@IT

jQueryのeach文のthisno使い方についてです。

3432 PV

jQueryの勉強をしていて質問があります。
質問は下記のコードにあるようなソースのeach文の中のthisについてです。


$(function(){
var test;
$('#test ul').each(function(){
test=$(this);
alert(test.children().eq(0).text());
test.eq(0).css({
color:'#FFFFFF',
backgroundColor:'#009900'
});
});





ul1 li1
ul1 li2
ul1 li3


このコードではセレクタの部分で$('#test ul')で指定していますが、これを('#test ul li')と指定して一つ目のli要素の指定として$(this).eq(0)としてもうまく行きません。

eachのthisとはどのような形で値を持っているのでしょか?

よろしくお願いいたします。

  • #test, ul, li はどういう構成になっているのですか? ul1, li1 ~ 3 とか書いてありますが、それでは分かりません。回答者が想像しなくても済むようきちんと書いていただけませんか? -
  • それから、うまく行くとどうなって、うまく行かないとどうなるのでしょうか? -

回答

each の中の this は each で反復されているDOM要素です。

$('#test ul').each(function(){})

なら each の this は ui 要素です。

$('#test ul li').each(function(){})

なら each の this は li 要素です。each はセレクタにマッチする要素の数だけ呼ばれますが、その各呼び出しで、それぞれ異なる li 要素になります(N回目の呼び出しでは N 番目の li 要素が this になるという意味)。

$(this)

で、DOM 要素を jq オブジェクトにしていますが、そうして得られた jq オブジェクトは単一の DOM 要素のみを含んでいます。

$(this).eq(0)

で、jq オブジェクトに含まれる最初の DOM 要素の jq オブジェクトが得られますが、元の jq オブジェクト $(this) には元々1つしか DOM 要素が含まれていないので意味がありません。


例えば、

$('#test ul li')

で得られる jq オブジェクトは複数の li 要素を含んでいるので、

$('#test ul li').eq(0)

とすれば

  • #test の
  • 子孫の ui 要素の
  • 子孫の li 要素の
  • 0 番目の

jq オブジェクトが得られます。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。