顯示/隱藏用相同的類名多個div

我通過它產生下面的HTML的ResultSet循環：顯示/隱藏用相同的類名多個div

<tr> 
    <td class="optionItems"> 
     Test<br /> 
     Test<br /> 
     <a href="#" class="description" > 
      <img src="../../Images/Magnifying-Glass-icon.png"/>&nbsp;Description 
     </a> 
    </td> 

    <td colspan="2" class="optionItemsLast"> 
     <input type="submit" value="Book" class="buttonGreen" /> 
    </td> 
</tr> 

<tr> 
    <td colspan="3" class="optionItems"> 
     <div class="slidingDiv"> 
      Test><br /> 
     </div> 
    </td> 
</tr>

我有以下的jQuery代碼顯示/隱藏與類名「slidingDiv股利「：

$(".slidingDiv").hide(); 
     $(".description").show(); 

     $('.description').click(function() { 
      $(".slidingDiv").slideToggle(); 
     });

當我點擊任何帶有」description「類名稱的鏈接時，所有的div都顯示出來。我只想顯示與我點擊的「描述」鏈接相對應的div。

我已經試過這樣的事情：

$('.description').click(function() { 
      $(this).parent().children(".slidingDiv").slideToggle(); 
      //$(".slidingDiv").slideToggle(); 
     });

，但沒有成功。任何幫助，將不勝感激。

來源

2012-04-17 Mike

不知道你是否需要一個「slidetoggle」的值，但是如果你這樣做會發生什麼：$（「。slidingDiv」）。hide（）; （）。（「。slidingDiv」）。show（）; }）; – BTHarris 2012-04-17 20:26:45

不相關，但我建議使用像這樣的div表：http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/ – Ghokun 2012-04-17 20:27:59

嘗試下面的代碼，

$('.description').click(function() { 
    $(this) 
     .closest('tr')  //get the closest tr 
     .next()    //get the next row of that tr 
     .find('.slidingDiv') //find .slidingDiv in next row 
     .slideToggle()   
});

假設：這2 TR是相關的，.description最接近TR的未來將是.slidingDiv的TR

來源

2012-04-17 20:24:27

太棒了。這工作。謝謝。 – Mike 2012-04-17 20:26:51

你需要去一路攀升樹tr然後進入兄弟tr：

$('.description').click(function() { 
    $(this).closest("tr").next().find(".slidingDiv").slideToggle(); 
});

來源

2012-04-17 20:25:21

'.closest（「tr」）。next（）'應該是'tr'，如果它是一個有效的HTML。 – 2012-04-17 20:27:21

@Vega：我知道，並且辯論過......但我反正把它放了。另外，我從SO學到，人們有時會使用無效的html。 :)我會把它拿出來。 – 2012-04-17 20:30:13

顯示/隱藏用相同的類名多個div

回答

相關問題