在另一个带有Jquery类的div后面选择带有"n“类的div。

Question

我有这个jquery代码来添加onclick事件，以最小化和最大化图像，使用类mainBody折叠和展开div。

在我添加带有类divSectionInfo的div之前，它是工作的，它现在用于在单击icon16图像时展开，并在单击close图像时折叠divSectionInfo。

我在使用类mainBody选择下一个div时遇到了问题，divSectionInfo类跳过了div。

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;
});

要查看一个工作示例这里，在添加带有类divSectionInfo的div之前

这是在添加带有类divSectionInfo 这里的div之后

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

可以，但您可能应该使用其他答案中提到的ID。基本上，而不是取决于一个深层的节点层次结构(父div具有包含有类mainBody的div的兄弟级div --请将其中的第一个！)而是转到.section，然后找到.mainBody (cf )。尼克·克雷弗的回答)。以这种方式选择器的不太容易出错，如果(当！)标记更改.