Utilisation de jQuery pour basculer DIV dans la ligne suivante

Question

J'essaie de basculer le div class_ build_files_toggle dans la ligne suivante lorsque vous cliquez sur le lien build_files_toggld au-dessus. Je peux obtenir la ligne suivante à réduire avec $ (this) .parent(). Parent(). Next(). SlideToggle (30), mais quand j'ajoute le '.build_files_toggle' ça ne marche pas ... et c'est me tue. J'ai même essayé $ (this) .parent(). Parent(). Next(). Children ('. Build_files_toggle'). SlideToggle (30); Mais pas de chance! Toute idée ici serait géniale.

Enfer même un très bon tutoriel sur tous les sélecteurs de jquery serait sympa!

$(".build_files_toggle").click(function() 
    { 
    $(this).parent().parent().next('.build_files_toggle').slideToggle(30); 

    }); 

    <div class="buildGroup" id="RecentBuilds"> 
     <table> 
      <tr> 
       <th>  
        Build Date 
       </th> 
       <th> 
        Built By 
       </th>     
      </tr> 
      <tr> 
       <td> 
        Aug 22nd 3:11 pm 
       </td>     
       <td> 
        <a href="#" class="build_files_toggle" >View</a> 
       </td>     
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div id="build_files1" class="infoBox_build_files"> 
         This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. 
        </div> 
       </td> 
      </tr> 
     </table> 

Answer 1

ne devrait-il

.children('.infoBox_build_files') 

Version complète:

$("a.build_files_toggle").click(function() { 
    $(this).closest("tr").next().find("div.infoBox_build_files").slideToggle(30); 
}); 

Answer 2

Il y a plusieurs façons de peler ce chat. Voici une suggestion:

$("a.build_files_toggle").click(function() { 
    $("#build_files1").slideToggle(30); 
}); 

Note: "build_files1" est un ID pas une classe. Vous pouvez le faire avec l'autre classe:

$("a.build_files_toggle").click(function() { 
    $(this).parents("div.buildGroup:first").find("div.infoBox_build_files").slideToggle(30); 
}); 

mais il n'y a aucune raison de ne pas faire cet exemple spécifique avec l'ID.

Je vous suggère également d'utiliser un nom de tag dans votre sélecteur si possible plutôt qu'un simple sélecteur de classe nu (par exemple "div.buildGroup" au lieu de ".buildGroup".) Généralement, beaucoup plus rapide (selon le navigateur) .

Answer 3

Puisque vous avez une classe sur un élément dans la ligne que vous voulez, vous pouvez simplement faire:

$('.build_files_toggle').click(function() { 
    $('.infoBox_build_files').parents('tr').toggle(); 
}); 

Answer 4

Essayez ceci:

$(".build_files_toggle").click 
(
    function() 
    { 
    $(this) 
     .parents("tr:first") 
     .next() 
     .find(".infoBox_build_files") 
     .slideToggle(500); 
    } 
); 

Je pense que vous voulez dire pour changer la .infoBox_build_files DIV par opposition à .build_files_toggle.

J'ai essayé ceci sur ma machine dans IE 7 et cela a fonctionné très bien. Deux points cependant: (1) ajouter une largeur explicite à la fois pour les colonnes table et table. Si vous ne le faites pas, l'action disparaissante créée par la fonction slideToggle sera visible. (2) 30 millisecondes pour un slideToggle est peut-être trop rapide. Essayez un intervalle plus long, comme 500 dans l'exemple ci-dessus. Je recommande également que vous utilisez la fonction parents() par opposition à parent(). Le premier recueille les ancêtres de l'ensemble encapsulé, et en fournissant le sélecteur "tr: ​​first", vous pouvez mettre à zéro sur la première ligne de la table parent de l'élément dans le contexte. Cela vous permet d '«oublier» à quoi ressemble votre balisage et de vous concentrer un peu plus efficacement sur la tâche à accomplir.