jQueryの隣接セレクターが上手く動作しない

質問

jQueryを用いてギャラリーのページを作成しています。
ページのイメージは上部にサムネイル画像が並べてあり、その下にクリックされたサムネイル画像に対応する大きな画像を表示するというものです。その中で隣接セレクターが上手く動作せず悩んでいます。どなたか教えていただきたく、よろしくお願いいたします。

具体的には

HTML部分
<\-- サムネイル部分 -->
<div id="navi">
<ul>
<li>
<a href="images/img1.jpg"><imgsrc="images/img1_thum.jpg" alt="作品１" /></a>
　</li>
：
：
</ul>
</div>

<\-- 大きな画像表示部分　-->
<div id="main">
<img src="とりあえず最初の作品のパス" alt="最初の作品"/>
</div>

jQuery部分
$(function(){
$("#navi a").click(function(){
var filename=$(this).attr("href");
var altname=$("+img",this).attr("alt");
：
：

ここで、filenameには a要素のhref属性の値が入るのですが、altnameが　undefined　になってしまいます。
私は　$("+img",this).attr("alt");　　で
　this (この場合はa要素)の次のimg要素のalt属性　(たとえば「最初の作品」)が返ると考えているのですがなにが間違っているのでしょうか？

回答No.1

ss-ak · ベストアンサー

「隣接セレクター」の意味を誤解されているようです。
「隣接」というのは、*同じ階層の深さの*エレメント同士の隣接、という意味です。
今回の例ですと、imgエレメントはaエレメントの「子」になりますので、+imgと書かれている部分を単にimgに修正すれば動作すると思います。
この書き方では「子孫セレクター」になりますので、直下の子、というセレクターの書き方にこだわりたい場合は、>imgになります。

お礼

早速のご回答ありがとうございました。
確かに隣接セレクターの意味を勘違いしていました。
今回　>img　と書き換えて上手く動作しました。
ありがとうございました。