nextの使い方

質問

jQueryを勉強したてです。
http://jonraasch.com/blog/a-simple-jquery-slideshow
こちらのスライドショーのソースなのですが、
【HTML部分】
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>

【jQuery部分】
function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
となっていますが、activeを差し替えて表示するものをどんどん変えていっているというのはなんとなくわかるのですが、
var $next = $active.next();
で、なぜクラス指定していない次のIMGタグが$nextに読み込まれることになるんでしょうか。
var $active = $('#slideshow IMG');
だったら納得いくものの、
var $active = $('#slideshow IMG.active');
であれば、HTMLでは１行しか該当しているものがないので、nextでは読み込まれないように思うのですが・・・

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

回答No.3

LancerVII · ベストアンサー

こんにちは。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7348297/
それぞれのボタンを押すと、その要素から次に見える要素に枠線を表示していきます。

<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" class="hoge" />
<img src="img/img3.jpg" alt="" />
</div>
<何かタグ />

$('#slideshow').next()←<何かタグ />

$('#slideshow img.active').next()←img/img2.jpg

>何を元に、どの要素のnextなのかがあいまいでよくわかりません。
何を・・・$('')で取得した要素のnextです。

nextの場合はツリーの1階層上というよりは上から見たときのほうがイメージしやすいと思います。

<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
<video src="hoge.mp4">
</div>
<img src="img/img4.jpg" alt="" />
<img src="img/img5.jpg" alt="" />

>とあった場合に、#slideshow以外のimgタグや、中のvideoタグは取得されないのでしょうか。
$('#slideshow').next()の場合はimg4になります。
$('#slideshow img.active').next()の場合は#slideshowの中のimg.activeの次ですのでimg2です。
その次はimg3、その次はvideoです。

お礼

なるほど、videoもということで理解できました。
しつこい質問にご丁寧に回答いただき、ありがとうございました。

回答No.4

神崎 渉瑠（@taloo）

next()というのは、$(selector)で取得した「ノードリストの次のindexのもの」ではなく、
単純にDOMツリーのnextSiblingを指しているだけではないのでしょうか？

お礼

ご回答ありがとうございます。
nextSiblingが理解できればいいんですけど・・・（＾＾；

回答No.2

LancerVII

こんにちは。

隣と言うのは隣です。
imgタグでactiveクラスの隣りですので2番目のimgが選択されます。

#slideshow imgで取得するとslideshowの中のimgを全て取得してしまいます。

div#slideshowの子要素がimg(この場合は3つ)
no.1に挙げた例ですとslideshow2が隣になります。

ツリー構造にして同じ階層にいる次の要素になります。
マンションのお隣さんみたいなものです。（ちょっと乱暴かも

お礼

それでは
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
<video src="hoge.mp4">
</div>
<img src="img/img4.jpg" alt="" />
<img src="img/img5.jpg" alt="" />

とあった場合に、#slideshow以外のimgタグや、中のvideoタグは取得されないのでしょうか。
ツリー構造で１階層上までで判断するということでしょうか。
何を元に、どの要素のnextなのかがあいまいでよくわかりません。
よろしくお願い致します。

補足

あ、さらにすいません。

<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" class="hoge" />
<img src="img/img3.jpg" alt="" />
</div>
はどうなんでしょうか。

回答No.1

LancerVII

こんにちは。

next()は隣の要素を読み込みます。

なので最初は
$('#slideshow IMG.active')で取得(この場合img1.jpg)
の次はimg2.jpgになります。

<div id="slideshow">
</div>
<div id="slideshow2">
</div>

こうあったとすると
$('#slideshow').next()はslideshow2が取得できます。

お礼

ご回答ありがとうございます。
隣の要素、の定義はなんでしょうか。

と、いうことは
$('#slideshow IMG')
でも問題ないということでしょうか。