animateを使用したマウスオーバー時の反応

質問

jQuery初心者で、知識が浅いのでご教授頂けると幸いです。

横１列に下記のような順番でテキストや画像を並べています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
タグ　画像　テキストテキストテキスト　　　　　　　　　　テキスト
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このBOX自体に class="top_odai" とつけています。
これが30段程、同じものが繰り返されます。（タグやテキスト内容は変わります。画像は同じものです）

.top_odai内のリンクを探して、このBOX全体がリンクになるように設定しています。
マウスオーバー（hover）すると、「画像が少し大きくなる＆タグが左にずれる」動作が起きるようにしました。
テキスト自体は、色が変わってシャドウが付きます。

この設定をjQueryで書いてみました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$(document).ready(function() {
var linkboxes = $('.top_odai');
for (var i=0; i<linkboxes.length; i++){
var readmores = $('div.title');
for (var j=0; j<readmores.length; j++){
$('.top_odai').click(function() {
var anchorTags = this.getElementsByTagName("a");
window.location = anchorTags[0].href;
});
}
}
});

$(function(){
$('.top_odai')
.each(function(){
$('.top_odai div.headwill img').css({'width':'20px','height':'20px'});
})
.hover(function(){
$(this).addClass('top_odai_hover');
$('div.title a').css({'color':'#FF3300','text-decoration':'none'});
$('.top_odai div.headwill img').stop().animate({'width':'30px','height':'30px','marginTop':'-5px'},'normal');
},
function(){
$(this).removeClass("top_odai_hover");
$('div.title a').css({'color':'#525252','text-decoration':'none'});
$('.top_odai div.headwill img').stop().animate({'width':'20px','height':'20px','marginTop':'0px'},'normal');
}
);
});
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
これで、記述はかなりスマートじゃないと思いますが、、、一応希望通りの動きはします。

ただこれでは全ての「class="top_odai"」に反応してしまいます。
１つのリンクに触れると、他の段の全てのBOXが同じく動いてしまいます。

下記は動作のテストページになります。
http://music333.oops.jp/test/test.html

これを１つのリンクに触れたら、そのBOX（.top_odai）だけ上記の動きを
させたいのですが、どのようにすれば良いのか、、、かなりハマっております。

各top_odaiに連番のidを割当て指定してみたりと色々試してみましたが全滅でした。
どのように書き換えたら、良いでしょうか？
アドバイス・ご教授どうぞ宜しくお願い致します。

回答No.1

fujillin · ベストアンサー

＞１つのリンクに触れると、他の段の全てのBOXが同じく動いてしまいます。
ホバーした要素に関係なく、全体の $('div.title a')　などに対して処理をしているからでしょう。
$('div.title a', this)などでセレクトすればよいのでは？　
.
セレクタの指定方法について調べてみるのがよろしいかと思います。

おせっかいながら、各要素の構成が決まっているのであれば…
例えば、img要素が一つだけなのでわざわざクラス設定などをしなくともセレクト可能だし他の要素も同様なので、外側の構成要素さえ特定できれば充分と思われます。

お礼

ご教授ありがとうございます！！！

$('div.title a', this)という形で各要素を指定しなおしたら
無事リンク１個１個で動作致しました。

imgや他要素もクラス設定なしでまとめて記載した所、こちらも問題なく動作しました。

今一度、セレクタの指定方法を勉強しなおします。
本当にありがとうございました！