jQuery wrapAll/unwrap 搞乱了定位

Question

用 jQuery 包装 div 后，展开它们然后尝试再次包装它们似乎会丢失 float 属性(我的猜测)，我不知道如何解决这个问题。

当第一次按下 JSFiddle 中的换行按钮时，它会像我期望的那样对齐 div。然后我打开 div 并将它们放回到原来的位置，这也很好。但是当我再次换行时，div 会一个接一个地排列，而不是形成方形。任何想法出了什么问题吗？

JSFiddle

HTML

<div id="container">
    <div id="a1" class="block">A1</div>
    <div id="a2" class="block">A2</div>
    <div id="b1" class="block">B1</div>
    <div id="b2" class="block">B2</div>
</div>
<button onclick="wrapIt()">wrap</button>
<button onclick="unwrapIt()">unwrap</button>

CSS- 请参阅 JSFiddle。它只是设置容器的定位、其中的四个 div 以及包装。

JS

function wrapIt(){
    $(".block").wrapAll("<div id='wrapping'></div>")
    $(".block").css({ 'position': 'relative' })
    $(".block").css({ 'display': 'inline-block' })
    $(".block").css({ 'margin': 10 }) 
    $(".block").css({"float": "left"})
}
function unwrapIt(){
    $(".block").unwrap()
    $(".block").css({ 'position': 'absolute' })
    $(".block").css({ 'margin': 0 }) 
    $(".block").css({"clear": "both"})

    $("#a1").css({"margin-top": 30})
    $("#a1").css({"margin-left": 30})
    $("#a2").css({"margin-top": 30})
    $("#a2").css({"margin-left": 80})
    $("#b1").css({"margin-top": 80})
    $("#b1").css({"margin-left": 30})
    $("#b2").css({"margin-top": 80})
    $("#b2").css({"margin-left": 80})    
}

Answer 1

如果有人搜索类似的解决方案:我确实以稍微不同的方式解决了问题 - 我为此使用了 addClass 和 removeClass 。 (仍然不知道为什么第一个不起作用......)

JSFiddle

这是代码:

HTML 同上

CSS

.wrappedclass {
    position: relative;
    float: left;
}
.unwrappedclass {
    position: absolute;
    clear: both;

}

.block {
    height: 40px;
    width: 40px;
    background-color: grey;

}
#container {
    height: 150px;
    width: 150px;
    border: 1px solid black;
}
#wrapping {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    border: 1px dashed black;
}

JS

$(document).ready(function(){
     $(".block").addClass("unwrappedclass")
     $("#a1").css({"margin": "30px 0 0 30px"})
     $("#a2").css({"margin": "30px 0 0 80px"})
     $("#b1").css({"margin": "80px 0 0 30px"})
     $("#b2").css({"margin": "80px 0 0 80px"})
})

function wrapIt(){
    $(".block").wrapAll("<div id='wrapping'></div>")
               .removeClass("unwrappedclass")
               .addClass("wrappedclass")
    wrappedFormation()
}

function unwrapIt(){
    $(".block").unwrap()
               .removeClass("wrappedclass")
               .addClass("unwrappedclass")    
    unwrappedFormation()
}

function unwrappedFormation(){
    $("#a1").css({"margin": "30px 0 0 30px"})
    $("#a2").css({"margin": "30px 0 0 80px"})
    $("#b1").css({"margin": "80px 0 0 30px"})
    $("#b2").css({"margin": "80px 0 0 80px"})      
}

function wrappedFormation(){
    $(".block").css({"margin": "17px"})
}