Question

我在网上发现了很多关于如何删除，附加，前置等的信息。来自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从一个地方移动到另一个地方。

谢谢

Answer 1

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

$(document).ready(function () {
    $("#SwapButton").click(function () {
        var left = $('#Left');
        left.detach();
        $("#LeftAndRightRow2").append(left);
    });
});

Answer 2

当您使用$("#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/

Answer 3

我认为你的问题更多是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

将<div>从一个<div>移动到另一个<div> </div> </div>

3 个答案: