Question

我需要特别分离（）父母div，同时让孩子完整无缺。

unwrap（）对我来说非常合适，但它会删除div，我会想稍后恢复它。是否有用于分离的unwrap（）方法？

实施例：的CSS：

body{
   background: green;
}

#parent{
    height: 500px;
    width: 500px;
    background: black;
}

#red{
    height: 250px;
    width: 250px;
    background: red;
    float: left;
    margin-top: 100px;
}

HTML

<body>
    <div id="parent">
        <div id="yellow">yellow</div>
        <div id="red">red</div>  
    </div>   

</body>

jquery的

$( document ).ready(function() {

    $("#yellow").click(function(){
          one();
    });

    $("#red").click(function(){
        two();
    });

});

function one(){

    $("#yellow").unwrap();  
}

function two(){

        $("#parent").appendTo("body");
        $("#yellow").appendTo("#parent");
        $("#red").appendTo("#parent"); 
}

http://jsfiddle.net/UzvCR/1/

建议？

Answer 1

以下是我如何去做...

首先，使用.clone()创建父元素的克隆，并使用.empty()清空内容。

接下来使用.unwrap()取出父母。

最后，使用.wrapAll()来包装克隆。

DEMO：http://jsfiddle.net/dirtyd77/UzvCR/2/

$( document ).ready(function() {
   //clone the parent and empty out the content
   var clone = $('#parent').clone().empty();

    $("#yellow").click(function(){
          one();
    });

    $("#red").click(function(){
        two();
    });

    function one(){
        //unwraps #parent
        $("#yellow").unwrap();  
    }

    function two(){
        //use .wrapAll
        //perhaps use a class for each child element -- $('.color')
        //so you don't have to use multiple IDs in the selector -- $('#red, #blue, #yellow')
       $("#yellow, #red").wrapAll(clone);
    }  
});

如果您有任何疑问，请与我联系！

Jquery：detach（）父级而不影响子级... unwrap（）做得太多了

1 个答案: