jqueryについて（v 1.4.2）

質問

jqueryについて（v 1.4.2）

<script type="text/javascript">
$(function() {
$("h1").append('<em></em>')
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage").attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
</script>

【html↓】
<div>
<h1>ギャラリータイトル</h1>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
<a href="images/img3-lg.jpg" title="タイトル 3">
<img src="images/img3-thumb.jpg" />
</a>
<a href="images/img4-lg.jpg" title="タイトル 4">
<img src="images/img4-thumb.jpg" />
</a>
<a href="images/img5-lg.jpg" title="タイトル 5">
<img src="images/img5-thumb.jpg" />
</a>
<a href="images/img6-lg.jpg" title="タイトル 6">
<img src="images/img6-thumb.jpg" />
</a>
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>
</div>

上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを
適用したいと思っています。
.each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが
反応してしまいます。
.click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。
個々のdivに適用するにはどうすればいいのでしょうか。
.each()を使う事自体が間違っているのでしょうか。
初心者なので分かりやすく教えていただければ幸いです。

回答No.2

mtaka2 · ベストアンサー

すみません、HTMLの構造をちょっと見間違えてました。

---
<div class="thumbs">
<h1>ギャラリータイトル</h1>
<p>
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
(略)
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>
</div>
---
こんな感じにしてください。

要は、「サムネイル画像のa要素」と「拡大表示のimg要素」の両方が入った
「同じ構造のdiv」の1組をセレクタで指定できる名前付けが必要になるということです。

お礼

引き続きの回答ありがとうございます。

教えていただいたとおり、divにクラスthumbsを指定することによって
各divの.largeImageが反応し、問題が解決できました。

divにクラス指定するのは全然気づきませんでした・・・。
おっしゃられた意味も全て理解できましたし、またひとつ勉強になったので
質問して良かったです。

ありがとうございました。

回答No.1

mtaka2

実際に試してませんが、たぶん
---

$(function(){
$(".thumbs").each(function(index, elem) {
$("a",$(elem)).click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage",$(elem)).attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
});
});

---
こんなコードでいけると思います。
$()は、第二引数を指定することで、その指定要素の下から検索するようになります。

$(".thumbs").each で、クラスthumbsの要素について処理してますが、その中では、
$("a",$(elem)) は「elem=その時eachで処理対象にしているthumbsクラス要素」の下の a タグ要素を検索
$(".largeImage",$(elem))は、「elem=その時eachで処理対象にしているthumbsクラス要素」の下の largeImage クラス要素を検索
することで、cilck対象要素と書き換え対象要素を、同じ thumbs クラス要素配下に限定できます。

お礼

早速の回答ありがとうございます。
解りやすく教えていただき勉強になります。

教えていただいたとおり試してみましたが、うまくいかず
.largeImageが無反応になりました。
また、aをクリックすると画像ページに飛んでしまうのでreturn falseを
追加しました。

試してみたコード↓

$(function(){
$(".thumbs").each(function(index, elem) {
$("a",$(elem)).click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage",$(elem)).attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
});

自分なりに試行錯誤してみましたが、まだ解決策が出ません。
引き続きよろしくお願いします。