htmlリストのグループからリストを非表示にするにはどうしたらよいですか？

Question

私の見解では

<ul> 
<li id="list"> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good morning 
</td> 
<tr> 
</table> 
</li> 

<li> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good evening 
</td> 
<tr> 
</table> 
</li> 

</ul> 

<script type="text/javascript"> 
$(function() { 

    $(".hide").live("click", function() { 

     $(".hide").closest("li").hide("slow"); 


    }); 

}); 

を次のように私は

私は特定の李を非表示にする必要があるIDの皮と私のスクリプトを画像をクリックすると、合計10 Liがあります。

しかし、その誰も働いていないpls私を助ける

Answer 1

あなたのHTMLにクラス=「非表示」に複数の要素..change idは=「非表示」に一意のIDを使用するカント「= ID =「非表示」の代わりにクラスを持っています隠す"。

WRONG: <img src="../../Content/Images/downarrow.gif" title="Hide Details" id="hide"> 
GOOD: <img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 

$(".hide") - this one selects all elements with class="hide" 

UPDATE：あなたは、クラスを使用する必要が<li id="list"> ：

はまた、あなたが同じID = "リスト" で複数のLIタグを持っている<li class="list">

IDの違いをクラスは1つの要素を識別するためにIDを使用できるのに対して、クラスは複数の要素を識別するために使用できるということです。

SOLUTION：

<li class="list"> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good morning 
</td> 
<tr> 
</table> 
</li> 

<li class="list"> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good evening 
</td> 
<tr> 
</table> 
</li> 

</ul> 

と

$(function() { 
    $(".hide").live("click", function() { 
     $(this).parents("li.list:first").hide("slow"); 
    }); 
}); 

ここでデモを試してみてください。（それはIDたかのように）http://jsfiddle.net/RtXn9/

Answer 2

あなたはあなたのimgタグが

$(document).ready(function(){  

     $(".hide").live("click", function() {  
      $(this).parents().find('li').hide('slow'); 

     });  

    });