jqueryを使ってポップアップを作ろうとしています。

質問

jqueryを使ってポップアップを作ろうとしています。
アイコンにマウスオーバーでポップアップ表示、ポップアップの×をクリックしてポップアップ削除という動きまではできています。
しかしマウスオーバーのアイコンはul　liの中にあるのに、ポップアップはulの外に置かれているため、thisが使えず、アイコンにマウスオーバーすると全てのポップアップが表示されてしまいます。
これをマスウオーバーしたアイコンのポップアップのみ表示できるようにしたいです。

下記にソースになります。表示させたいのはアイコン02にカーソルを合わせた場合のみになります。
よろしくお願いいたします。

JS
----------------------------------------------------------------
$(function(){
$(".popup").hide();
$(".box ul li.icon02").mouseover(function(){
$(".popup").fadeIn("fast").css({
top:10+"px",
left:-95+"px"});
});
$(".popup img.closed").click(function(){
$(".popup").fadeOut("fast");
});
});

html
----------------------------------------------------------------
<div class="box">
<div class="boxIn">
<ul>
<li class="ico01"><a href="#"><img src="アイコン１url" /></a></li>
<li class="ico02"><a href="#"><img src="アイコン２url" /></a></li>
<li class="ico03"><a href="#"><img src="アイコン３url" /></a></li>
</ul>

<!--▼pop-up部分-->
<div class="popup">
<p>●●<img src="クローズボタンurl" alt="close" width="12" height="12" class="closed" /> </p>
<div class="popInner">
<p>ポップアップの中身</p>
<!--#popInner-->
</div>
<!--#popup-->
</div>
<!--▲pop-up部分ここまで-->

<!--#boxIn-->
</div>
<!--#box-->
</div>

以下
<div class="box">
～～同じ構成要素の繰り返し。

回答No.1

steel_gray · ベストアンサー

$(".popup").～
↓
$(".popup" , $(this).parents(".box") ).～

これで、thisの先祖（".box"）を起点とした".popup" が選択されます。
http://semooh.jp/jquery/api/traversing/parents/%5Bexpr%5D/

closeボタンの処理同様の変更が必要かと思います。

お礼

ありがとうございます。
こちらのレスをベストアンサーにさせていただきます。

補足

ありがとうございます！
マウスオーバーの方は上手く行きました！
閉じる方は同じ表記をしてもダメなようです。

popupの中のimg要素をクリックしてpopupをフェードアウトさせる。

popup img.closed = this

boxはpopupを包括しているので、thisの祖先要素。
"popup", $(this).parents(".box")
で選択したimg.closeの祖先要素にあたるboxの中のにあるpopupをフェードアウト。
という考え方だと思うのですが・・・。

回答No.3

steel_gray

＞残念ながら、上記の記述でも
そうですか。一応テストしてみるとうまく動作するので
質問で挙げたHTMLとの構成の違いとかがないか慎重に確認してみてください。

お礼

steel_gray様

何度もレスありがとうございました。
後日サーバーにあげたページにアクセスしたら問題なく動くようになっていました！
ブラウザのリロードは何度もしたのですが、キャッシュが消えきっていなかったようです。
本当にありがとうございます！

回答No.2

steel_gray

その考え方で「も」合っていると思います。
＞"popup", $(this).parents(".box")
↑popupの前にドットが無いのは補足入力時のタイプミス？

ただし、クローズボタン（this）にとって .popup は祖先にあたるので .box まで戻って探す必要はなく、
$(this).parents(".popup").fadeOut("fast");
で、いいと思います。

補足

再度ありがとうございます。

>popupの前にドットが無いのは補足入力時のタイプミス？
はい、ミスタイプでした。
申し訳ありません。

残念ながら、上記の記述でもオープンした全てのポップアップが閉じてしまいます。
HTMLの書きなおしも含め、もう少しいろいろ検討してみたいと思います。