jquery recherche à travers plusieurs divs

Question

Je suis en train de faire une table coulissante avec jquery, mais parce que glisser jquery ne fonctionne pas trop bien avec les tables que je dois envelopper le contenu divs

Je l'ai déjà essayé de écrire quelque chose comme:

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

mais il ne fonctionne pas

est ici une partie de ma structure de la table (il y a plus de theads et 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

Je ne suis pas 100% sûr de ce que vous essayez d'atteindre exactement, mais voici au moins quelque chose à travailler avec:

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

Cela va dans les DOM à partir de « ce » (votre headhook) jusqu'à ce que le premier élément 'table'. De là, il trouve tous les éléments de div.bodyhook (à l'intérieur de cette table) et exécute slideToggle.

[EDIT] Vous pouvez le faire:

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

Il travaille en 1.3.2. C'est un peu "sale", définitivement une solution de contournement, mais tant que la "distance DOM" entre votre bodyhead et la table reste la même, vous allez bien.

[EDIT] (En ce qui concerne votre commentaire) Je peux penser à deux approches:

1) 'cacher' quand un autre est ouvert:

$(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) « feuilles souris 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); 
});