Sélectionnez div avec la classe "n" après un autre div avec une autre classe avec Jquery

Question

J'ai ce code jquery pour ajouter l'événement onclick afin de minimiser et de maximiser les images en réduisant et en augmentant le div avec mainBody de classe. Cela fonctionnait avant que j'ajoute le div avec la classe divSectionInfo qui est maintenant destinée à se développer lorsque vous cliquez sur l'image icon16 et que vous réduisez divSectionInfo lorsque vous cliquez sur l'image de fermeture.

J'ai des problèmes pour sélectionner le div suivant avec la classe mainBody en ignorant la div avec la classe divSectionInfo.

échantillon Html

<span class="section" style="clear: both"> 
    <div class="top"> 
     <h2> 
      <a href="javascript: void(0);">Heading </a> 
      <img src='../Images/min.gif' style='float:right;' alt='minimize'/> 
      <img src='../Images/max.gif' style='float:right;' alt='maximize'/> 
      <img src="../Images/icon16.png" style="margin-right: 50px;" alt="expand divSectionInfo" /> 
     </h2> 
    </div> 
    <div class="divSectionInfo"> 
     <span>This is text</span> 
     <span>This is text</span> 
      <img src="../GlobalResources/Images/close.png" alt="collapse divSectionInfo"/> 
     </div> 
    <div> 
    <div class="mainBody"></div>//This div is supposed to collapse and expand when minimize and maximize button are clicked. 
    </div> 

code Jquery.

$("img[alt='maximize']").click(function (e) { 
    //alert("2"); 
    $(this).closest("div").next("div").slideDown("fast"); 
    e.stopPropagation(); 
    return false; 
}); 

Pour voir un exemple de travail HERE, c'est avant d'ajouter la div avec la classe divSectionInfo

Ceci est afteradding la div avec classe divSectionInfo HERE

PD: Pour ceux qui ne savent jsbins, vous pouvez modifier le code en cliquant sur l'étiquette dans le coin en haut à droite qui apparaît lorsque vous placez la souris dans ce coin et dit modifier modifier en utilisant jsbin.

Merci.

Answer 1

J'utilise .closest() et .find() d'être ici les plus flexibles, comme celui-ci:

$("img[alt='maximize']").click(function (e) { 
    $(this).closest(".section").find(".mainBody").slideDown("fast"); 
    e.stopPropagation(); 
}); 

You can see your demo updated/working with this code here. Je donnerais vos boutons une classe si, par exemple:

<img class="minimize" src='http://png.findicons.com/files/icons/653/the_spherical/32/minimize.png' style='float:right;' alt='minimize'/> 
<img class="maximize" src='http://www.winnipegringette.com/images/icons/maximize.png' style='float:right;' alt='maximize'/> 

Ensuite, changez vos sélecteurs à utiliser que, au lieu de $("img.maximize")$("img[alt='maximize']").

Answer 2

jQuery:

$(this).closest("div").siblings("div").find("div.mainBody:eq(0)") 

Works, mais vous devriez probablement aller avec un ID comme mentionné dans d'autres réponses. Fondamentalement pas selon une hiérarchie de noeud profond (parent div avec frères et soeurs div contenant div avec classe mainBody - le premier de ceux-ci, s'il vous plaît!), Mais au lieu d'aller à la .section puis trouver le .mainBody (voir Nick Craver de answer). De cette façon, votre sélecteur est moins susceptible de se tromper si (quand!) Le balisage change.