jquery：detach（）父母不影響兒童... unwrap（）確實太多了

我需要在保留子節點的同時明確地分離父節點。jquery：detach（）父母不影響兒童... unwrap（）確實太多了

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/

建議？

來源

2014-02-06 user2072256

這是我會怎樣它...

首先，使用.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); 
    } 
});

讓我知道如果您有任何問題！

來源

2014-02-06 07:03:39 Dom

jquery：detach（）父母不影響兒童... unwrap（）確實太多了

回答

相關問題