一度に1つのdivにホバー変更を制限する

Question

それぞれコンテナdivで囲まれた3つの順序付けられていないリストがあります（例は以下に示してあり、3つのdivすべてでほぼ同じです）。各リストはリンクであり、ユーザーがリンク上を移動すると、段落内のテキストが変更されます。私はそれをすることができたが、ホバリングでは、3つのdivのすべての変更の段落のテキスト。私はなぜこれが起きているのか知っていますが、自分のコードを変更する方法がわかりません。

div ul li span { 
    display: none; 
} 


$(document).ready(function() { 
    $("div ul li a").hover(function() { 
     $(this).parent().addClass('current').siblings().removeClass('current'); 
     $('.highlight').html($('.current a span').html()); 
    }); 
});  

<div> 
    <ul> 
     <li><a href="#"><img src="images/test-1.gif" alt="#"></img><span>Test</span></a></li> 
     <li><a href="#"><img src="images/test-2.gif" alt="#"></img><span>Testing</span></a></li> 
     <li><a href="#"><img src="images/test-3.gif" alt="#"></img><span>More Testing!!!</span></a></li> 
     <li class="last"><a href="#"><img src="images/test-4.gif" alt="#"></img><span>Even More More Testing!!!</span></a></li> 
    </ul> 
    <p class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eros tortor.</p> 
</div> 

Answer 1

html($('.current a span').html())は毎回最初のdivで.currentを取得しています。

代わり

$("div ul li a").hover(function() { 
    $(this).parent().addClass('current').siblings().removeClass('current'); 
    $(this).closest("div").find('.highlight').html($(this).find('span').html()); 
}); 

Answer 2

$（ '。highlight'）を呼び出すと、jQueryはドキュメント全体のすべての要素をそのクラス名で返します。あなたはこのようにそれを呼び出す必要があります：

$(document).ready(function() { 
    $("div ul li a").hover(function() { 
     var that = $(this), 
      li = that.parent(), 
      ul = li.parent(); 
     parent.addClass('current').siblings().removeClass('current'); 
     $('.highlight', li).html($('.current a span', ul).html()); 
    }); 
}); 

お知らせ次のコードブロックにおける第二のparam「李」：これは、親コンテナ内の要素をマッチングを探すためにはjQueryを伝え

$('.highlight', li) 

。