Выберите 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;
});

Чтобы увидеть рабочий пример ЗДЕСЬ , это перед добавлениемdiv с классом divSectionInfo

Это дополнение к div с классом divSectionInfo ЗДЕСЬ

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

Спасибо.

Answer 1

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

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

Вы можете увидеть, как ваша демоверсия обновлена ​​/ работает с этим кодом здесь . Я бы дал вашим кнопкам класс, хотя, например:

<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)")

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