jQuery的搜索直通多個div

Question

我試圖與jQuery的滑動表，但因爲jQuery滑動不起作用了桌子太好我必須包裝

我已經嘗試在div的內容寫類似：

$("div.headhook").mouseenter(function() { 
//$(this).parent().next("div.bodyhook").slideToggle("slow"); 
$(this).closest("div").nextAll("div.bodyhook").slideToggle("fast"); 
}); 

，但它不工作

這裏是我的表結構的一部分（有更多theads和tbodys）：

 <table id="forum-0" class="forum-table"> 
            <thead class="thead5" style=""><tr id="forum-list-5" class="odd first-row container container-5" > 
         <th colspan="5" class="container"> 
      <div id="headhook5" class="headhook"> 
       <div class="forum-details"> 

       <div class="container_name name"> 
        <a href="/forum/5">Forum title</a> 
       </div> 
            <div class="description">Forum description</div> 
           </div> 
       </div> 
      </th> 
          <tr><td colspan="5" class="container_header"></td></tr> 

         </tr> 
      </thead> 
     <tbody class="tbody5"> 

      <tr class="accordion-fix"><td colspan="5" width="940px" height="0" class="accordion-fix"> 
      <div id="bodyhook5" class="bodyhook"> 
           <table> 
     <tr id="forum-list-11" class="even middle-row in-container-0"> 

      <td class="forum-icon"> <span id="thmr_23" class="thmr_call"> 

    <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span> 

</td> 

      <td class="forum-name2"> 
           <div class="forum-details"> 
        <div class="name"><a href="/forum/11">Forum A</a></div> 
            </div> 
          </td> 

      <td class="topics"> 
       <div class="num num-topics"> 
       1    </div> 
      </td> 

      <td class="num posts"> 
       2   </td> 

      <td class="last-reply"> 
       <span class="last-reply-timestamp">2010-11-09 11:51</span> <br/> 
       <span class="last-reply-name">jan</span> 
      </td> 
     </tr> 
     </table> 
           <table> 

     <tr id="forum-list-12" class="odd middle-row in-container-0"> 

      <td class="forum-icon"> <span id="thmr_24" class="thmr_call"> 
    <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span> 

</td> 

      <td class="forum-name2"> 
           <div class="forum-details"> 
        <div class="name"><a href="/forum/12">Forum B</a></div> 

            </div> 
          </td> 

      <td class="topics"> 
       <div class="num num-topics"> 
       0    </div> 
      </td> 

      <td class="num posts"> 

       0   </td> 

      <td class="last-reply"> 
       <span class="last-reply-timestamp"></span> <br/> 
       <span class="last-reply-name"></span> 
      </td> 
     </tr> 
     </table> 

           <table> 
     <tr id="forum-list-13" class="even middle-row in-container-0"> 

      <td class="forum-icon"> <span id="thmr_25" class="thmr_call"> 
    <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span> 

</td> 

      <td class="forum-name2"> 
           <div class="forum-details"> 

        <div class="name"><a href="/forum/13">Forum C</a></div> 
            </div> 
          </td> 

      <td class="topics"> 
       <div class="num num-topics"> 
       0    </div> 
      </td> 

      <td class="num posts"> 
       0   </td> 

      <td class="last-reply"> 
       <span class="last-reply-timestamp"></span> <br/> 
       <span class="last-reply-name"></span> 
      </td> 
     </tr> 

     </table> 
             </div> 
      </td></tr> 
      </tbody> 

Answer 1

我不是100％肯定的究竟你努力實現，但這裏的至少一些工作：

$(this).parents("table").first().find("div.bodyhook").slideToggle("slow"); 

這種上升在DOM開始「這個」（即你的headhook），直到第一個'桌子'項目。從那裏它找到所有div.bodyhook元素（在該表內）並執行slideToggle。

[編輯] 你可以這樣做：

$(this).parent().parent().parent().parent().find("div.bodyhook").slideToggle("slow"); 

它工作在1.3.2。這有點「骯髒」，絕對是一種解決方法，但只要你的bodyhead和table之間的「DOM距離」保持不變，你就沒問題。

[編輯]（關於你的評論） 我能想到的兩種方法：

1） '隱藏' 時，另一被打開：

$(function() { 
    $("div.bodyhook").hide(); // start all hidden 
    $("div.headhook").mouseenter(showthis); 
}); 

function showthis() {  
    $("div.headhook") 
     .not($(this)) 
     .parent().parent().parent().parent() 
     .find("div.bodyhook") 
     .slideUp("slow"); 
    $(this) 
     .parent().parent().parent().parent() 
     .find("div.bodyhook") 
     .slideDown("slow"); 
} 

2）「hide'when鼠標離開

function showthis() { 
    $(this) 
     .parent().parent().parent().parent() 
     .find("div.bodyhook") 
     .slideDown("slow"); 
} 

function hidethis() { 
    $(this) 
     .parent().parent().parent().parent() 
     .find("div.bodyhook") 
     .slideUp("slow"); 
} 

$(function() { 
    $("div.bodyhook").hide(); // start all hidden 
    $("div.headhook").mouseenter(showthis); 
    $("div.headhook").mouseleave(hidethis); 
});