jQuery - 选择同级的 div 元素

Question

当点击按钮时，我希望能够选择特定的div...唯一的问题是，它必须是按钮所在的父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');
});

有任何建议吗？:-)

- unebune

---

请添加一个演示fiddle。 - Quinn

糟糕...请使用这个链接 http://jsfiddle.net/unebune/n264v/1/ - unebune

$(this).closest('.listbar').prev() - adeneo

Answer 1

这应该可以解决问题。

.closest 方法将沿着父级元素向上查找，直到找到匹配的目标为止。然后你可以使用 .find 方法找到你要查找的目标 div。

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

这里有一个更新的例子：http://jsfiddle.net/n264v/2/

- Smeegs

Answer 2

使用

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

这将选择包含按钮的父级div元素的祖先div元素。

- Eduardo Quintana

Answer 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：

自行添加了以下CSS：

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

JSFiddle for the above sample

- Sunny R Gupta

---

其实我很喜欢这个，但是当我点击按钮时，两个类名为.list的div都打开了... 嗯.. 很奇怪.. - unebune

这段代码将切换具有“list”类的每个元素。 - mathius1

Answer 4

首先，没有带有"class"为"listaccordion"的div，因此您将永远找不到匹配项。

您可以使用：

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

- mathius1

Answer 5

尝试：

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

- Guillermo Gutiérrez