jQuery - 在同一级别选择 div答案

【问题标题】：jQuery - select div at same leveljQuery - 在同一级别选择 div
【发布时间】：2014-04-02 02:17:18
【问题描述】：

我想选择一个特定的 div，点击按钮时...唯一的问题是，它必须是 buttonClicked 的父 div 的 div...示例：

 <div class="container">
   <div class="box">
     <h2>Langtidsparkering</h2>
     <div class="content">
       Lorem ipsum dolor sit amet..
     </div>
   </div>
   <div class="listcontainer">
     <div class="list"> (THIS DIV SHOULD GET A CLASS "VISIBLE", WHEN THE BUTTON IS CLICKED)
     </div>
     <div class="listbar">
       <button class="viewPrices" type="submit" title="Open">Se priser<span></span </button>
      </div>
    </div>
  </div>

代码：

    $(".viewPrices").click(function () {
         $(".viewPrices").parents('.listaccordion .list').toggleClass('visible');
});

有什么建议吗？ :-)

【问题讨论】：

请添加一个演示小提琴。
哎呀...拿这个jsfiddle.net/unebune/n264v/1
$(this).closest('.listbar').prev()

标签： jquery class html select parent

【解决方案1】：

应该这样做。

.closest 将通过父母向上直到找到匹配项。然后你可以从那里.find你正在寻找的目标div。

$(".viewPrices").click(function () {
     $(this).closest('.listcontainer').find('.list').toggleClass('visible');
});

这是一个更新的小提琴：http://jsfiddle.net/n264v/2/

【讨论】：

【解决方案2】：

使用

$(this).parent().parent().children("div:eq(0)").toggleClass('visible');

这将选择按钮所在的父div的父div。

【讨论】：

【解决方案3】：

编辑了您的 JSFiddle：http://jsfiddle.net/n264v/3/

另外，以下代码也可以：

$(".viewPrices").click(function () {
         $(".viewPrices").parent().siblings('.list').toggleClass('visible');
});

对于这个 HTML：

<div class="container">
   <div class="box">
     <h2>Langtidsparkering</h2>
     <div class="content">
       Lorem ipsum dolor sit amet..
     </div>
   </div>
   <div class="listcontainer">
     <div class="list"> (THIS DIV SHOULD GET A CLASS "VISIBLE", WHEN THE BUTTON IS CLICKED)
     </div>
     <div class="listbar">
       <button class="viewPrices" type="submit" title="Open">Se priser<span></span </button>
      </div>
    </div>
  </div>

冒昧添加以下css：

.list{
    display:none;
}
.visible{
    display:block !important;
}

JSFiddle for the above sample

【讨论】：

其实很喜欢这个，但是当点击按钮时，两个 .list 类的 div 都打开了……嗯……很奇怪……
此代码将使用“list”类切换每个元素

【解决方案4】：

首先没有“listaccordion”类的 div，所以你永远找不到匹配项。

你可以使用：

$(".viewPrices").click(function () {
$(this).parent(".listbar").siblings(".list").toggleClass("visible");
}

【讨论】：

【解决方案5】：

试试：

$(".viewPrices").click(function () {
     $(this).closest('div').prev('div').toggleClass('visible');
});

【讨论】：