jQuery wrapAll / unwrap 打乱了定位答案

【问题标题】：jQuery wrapAll / unwrap messes up positioningjQuery wrapAll / unwrap 打乱了定位
【发布时间】：2014-07-17 11:18:16
【问题描述】：

在用 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 和包装。

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

【问题讨论】：

jQuery css 接受一个数组，或者您可以嵌套调用。只是为了改进该代码
你可以使用“margin: top right bottom left”语法。
这是实际代码的简化版本。任何想法为什么包装不能像预期的那样工作？
为什么你在 jquery 中都使用了 " " 和 ' '。甚至每行都缺少;。如果您在 jquery 中为 css 创建一个块，那么为什么要一次又一次地定义所有类。
我使用 JSFiddle 进行快速原型设计 - 因此同时使用 " 和 '。只是一个错误。关于为什么需要或不需要 ; 进行了长时间的讨论。所以这是一个偏好。关于类 - 我只是使用复制粘贴来快速 - 我现在才学习编程 2 个月。无论如何，谢谢大家纠正这些问题。但是有人知道如何解决问题的问题吗？

标签： jquery css positioning wrapall

【解决方案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;
}

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

【讨论】：