使用JQuery隱藏兄弟姐妹和父母的兄弟姐妹，直到給定的id

Question

我試圖擴大內部div由於按鈕點擊空間問題。 當用戶點擊按鈕時，我想隱藏其兄弟姐妹和父母的兄弟姐妹，直到指定的id。 如何使用jquery在javascript中執行此操作？

以下是一個例子：

DOM：

<div id="p">
    <div id="p1-1">
        <div id="c1-1-1">
            <button id="expand"></button>
        </div>
        <div id="c1-1-2">
        </div>
    </div>
    <div id="p1-2">
        <div id="c1-2-1">
        </div>
    </div>
    <div id="p1-3">
        <div id="c1-3-1">
        </div>
    </div>
</div>

結果Dom：

<div id="p">
    <div id="p1-1">
        <div id="c1-1-1">
            <button id="expand"></button>
        </div>      
    </div>  
</div>

Answer 1

找到你想要使用，以保持可見的元素parentsUntil（） ，通過循環利用它們每（） ，然后隱藏他們的兄弟姐妹（）。

$(button).click(function(){
    var elementsToKeep = $(this).parentsUntil('#stop_element_id');
    elementsToKeep.each(function(){
        $(this).siblings().hide();
    });
});

沒有足夠的代表發布鏈接到兄弟姐妹（）。

Answer 2

如果我正確理解了這個問題：

$("#expand").on("click", function () {
    // Toggle text
    var text = $(this).text() == "Expand" ? "Collapse" : "Expand";
    $(this).text(text);
    // Toggle proximal element state
    $(this).parent().siblings().toggle();
    $(this).parent().parent().siblings().toggle();
});

看到這個實例

Answer 3

'while-until'循環應該可以解決問題：

var str_stop_id = "p",
    $el = $(this).parent();
while ($el.attr('id') !== str_stop_id) {
    $el = $el.siblings().hide().end().parent();
}

http://jsfiddle.net/mblase75/Wc2Pf/

Answer 4

這很好用：

$(button).click(function(){
    var elementsToKeep = $(this).parentsUntil('#stop_element_id');
    elementsToKeep.each(function(){
        $(this).siblings().hide();
    });
});