0

我在网上找到了很多关于如何从 DIV 中删除、附加、添加等元素的信息。不幸的是，我很难让它发挥作用。

在我的项目中，我必须将元素附加到 div 并在网格上移动它们（每个网格单元都是它自己的 div） Bellow 是一个模仿我正在尝试做的小脚本。

这是示例（这里是 JSFiddle 的链接：http: //jsfiddle.net/mgR5b/25/）：

HTML：

    <div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
       <div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;">
        <button id="B1">B1</button>
        </div>
        <div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;">
        <button id="B2">B2</button>
        </div>
    </div>
    <div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
        <div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;">
            <button id="B3">B3</button>
        </div>
        <div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;">
            <button id="B4">B4</button>
        </div>
    </div>
   <br>
   <button id="SwapButton">Swap Button</button>

jQuery / JavaScript

现在，假设我想将容器“Left”（我想移动 Div，而不是按钮）交换到第二行（LeftAndRightRwo2）。

我尝试了各种方法，但没有一个奏效……我的最后一次尝试：

$(document).ready(function () {
    $("#SwapButton").click(function () {
        alert('trying to swap');
        $("#Left").remove();
        $("#LeftAndRightRow2").append($("#Left"));
    });
});

等等

我尝试过的都没有奏效。

有人可以帮助了解如何将 div 从一个地方移动到另一个地方。

谢谢

4

3 回答 3

3

当您删除一个元素时，它不再位于 DOM 上。如果你想像这样移动一个 DOM 元素，你需要将它存储在一个变量中。此外，您应该使用 detach 而不是 remove，因为在这种情况下它更有效。 

$(document).ready(function () {
    $("#SwapButton").click(function () {
        var left = $('#Left');
        left.detach();
        $("#LeftAndRightRow2").append(left);
    });
});
于 2013-10-13T21:14:04.453 回答
1

当您使用时，$("#Left").remove()您实际上是将其从 DOM 中删除，因此您以后无法使用$("#LeftAndRightRow2").append($("#Left"));.

尝试将其保存在变量中，如下所示：

JS

$("#SwapButton").click(function () {
    alert('trying to swap');
    var left = $("#Left");
    $(left).remove();
    $("#LeftAndRightRow2").append($(left));
});

现在整个div从右到左移动。

小提琴

http://jsfiddle.net/mgR5b/26/

于 2013-10-13T21:13:03.463 回答
0

我认为您的问题更多是 CSS 而不是 JS 我已经更改了您的标记和 CSS 以获得您正在寻找的结果

标记

<div id="LeftAndRightRow1" class="rows">
    <div id="Left">
        <button id="B1">B1</button>
    </div>
    <div id="Right">
        <button id="B2">B2</button>
    </div>
</div>
<div id="LeftAndRightRow2"  class="rows">
    <div id="Left2">
        <button id="B3">B3</button>
    </div>
    <div id="Right2">
        <button id="B4">B4</button>
    </div>
</div>
<br style="clear:both;" />
<button id="SwapButton">Swap Button</button>

JS

$(document).ready(function () {
    $("#SwapButton").click(function () {
        //alert('trying to swap');
       // $("#Left").remove();
        $("#LeftAndRightRow2").append($("#Left"));
    });
});

CSS

.rows{
display:block;
    clear:left;
}
.rows div{
float:left;
}

JSFIDDLE

于 2013-10-13T21:20:45.297 回答