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

Question

I am trying to expand the inner div due to space issues on a button click. When the user clicks on a button, I want to hide its siblings and parent's siblings until a specified id. How to do this in javascript using jquery?

Following is an example:

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>

Result Dom:

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

Answer 1

Find the elements you want to keep visible using parentsUntil() , loop through them using each() , then hide their siblings().

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

Not enough rep to post link to siblings().

Answer 2

If I understand the question correctly:

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

See this live example

Answer 3

A 'while-until' loop should do the trick:

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

This is working fine:

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