jQuery - 在同一级别选择div

Question

我想选择一个特定的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'); 
}); 

有什么建议？ :-)

Answer 1

这应该这样做。

.closest将通过父母，直到它找到一个匹配。然后从那你可以.find你正在寻找的目标股利。

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

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

Answer 2

使用

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

这将选择其中的按钮是父div的父div中。

Answer 3

尝试：

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

Answer 4

编辑您的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

Answer 5

首先有一个与类“listaccordion”所以你永远不会找到一个匹配不派息。

您可以使用：

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