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