jqueryを使用して同じIDを持つ複数のdivのうちの1つを表示するにはどうすればよいですか？

Question

共有IDを持つリンクの1つのホバー上に同じIDを持つ複数のdivの1つを表示/非表示にするためにJQueryを使用しようとしています。

マークアップスニペット

<div id='menuOption'> 
<a href='#'><div id='cat_name'>$sub[cat_title]</div></a> 
<div id='sub_menu' style='display:none;'>$itemlist</div></div>"; 

クエリスニペット（私が試した何を）：

$("#cat_name", this).hover(function(){ 
     $("#sub_menu", this).show(); 
}); 
$("#cat_name", this).mouseleave(function(){ 
     $("#sub_menu", this).hide(); 
}); 

私は私がこれを理解役立ちそうな情報を感謝しています。ありがとうございました。

Answer 1

HTML IDは一意である必要があります。代わりに、クラスを使用してhtml要素を選択します。

例：http://jsfiddle.net/GPhsC/2/

HTML

<div class='menuOption'> 
    <a href='#'><div class='cat_name'>$sub[cat_title]</div></a> 
    <div class='sub_menu' style='display:none;'>$itemlist</div> 
</div> 

jQueryの

$(".cat_name").hover(function(){ 
    $(this).parent().parent().find(".sub_menu").show(); 
}, 
function() { 
    $(this).parent().parent().find(".sub_menu").hide(); 
}); 

Answer 2

同じID属性を持つ複数の要素を持つことは、誤ったマークアップです。

エレメントのグループは、そのクラス属性で識別する必要があります。

ご例えば

<div class='menuOption'> <a href='#'><div class='cat_name'>$sub[cat_title]</div></a> 
<div class='sub_menu' style='display:none;'>$itemlist</div></div>"; 

と

$(".cat_name", this).hover(function(){ 
     $(".sub_menu", this).show(); 
}); 
$(".cat_name", this).mouseleave(function(){ 
     $(".sub_menu", this).hide(); 
});