jQuery wrapAll / unwrap портит расположение

Question

После упаковки div с помощью jQuery, развертывание и последующая попытка их обернуть, кажется, теряет свойство float (мое предположение), и я не могу понять, как это исправить.

При первом нажатии на кнопку wrap в сильфоне JSFiddle она выравнивает элементы 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"})
}