Выберите div с классом «n» после другого div с другим классом с JQuery

Question

У меня есть этот код jquery, чтобы добавить событие onclick, чтобы свести к минимуму и максимизировать изображения, сбрасывая и расширяя div с помощью класса mainBody.

Он работал до того, как я добавил div с классом divSectionInfo, который теперь предназначен для расширения, когда вы нажимаете на изображение icon16 и сворачиваете divSectionInfo, когда нажимается закрытое изображение.

У меня возникли проблемы с выбором следующего div с классом mainBody, пропуская div с помощью класса divSectionInfo.

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> 

Jquery код.

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

Чтобы увидеть рабочий пример HERE, это перед добавлением DIV с классом divSectionInfo

Это afteradding в DIV с классом divSectionInfo HERE

PD: Для тех, кто не знает jsbins, ты можно отредактировать код, щелкнув метку в правом верхнем углу, которая появляется, когда вы вставляете мышь в этот угол, и говорит, что редактирование редактируется с помощью jsbin.

Спасибо.

Answer 1

Я хотел бы использовать .closest() и .find() быть наиболее гибким здесь, как это:

$("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. Я хотел бы дать кнопкам класса, хотя, например:

<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'/> 

Затем измените селекторы, чтобы использовать это, $("img.maximize") вместо $("img[alt='maximize']").

Answer 2

JQuery:

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

работы, но вы должны, вероятно, пойти с ID, как указано в других ответах. В основном не в зависимости от иерархии глубокого узла (родителя div с братом div, содержащий div с классом mainBody - первый из них, пожалуйста!), Но вместо того, чтобы идти к .section, а затем найти .mainBody (ср Ник Craver-х answer). Таким образом, вы выбираете меньше, чем если (когда!) Разметка изменяется.