Question

用jQuery包装div后，解开它们然后再次尝试换行它们似乎失去了浮动属性（我的猜测），我无法弄清楚如何解决这个问题。

第一次在JSFiddle波纹管中按下换行按钮时，它会像我期望的那样对齐div。然后我解开div并将它们放回原来的位置，这也很好。但是当我再次换行时，div会在另一个下面而不是一个正方形。有什么想法是错的吗？

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"})
}

jQuery wrapAll / unwrap搞砸了定位

1 个答案: