jquery - 为什么 insertBefore，在这种情况下，删除我的元素？

Question

代码：

HTML

<div class="try" id="try1">1</div>
<div class="try" id="try2">2</div>
<div class="try" id="try3">3</div>

jQuery

var ImmagineDrag=$('#try3');
var ImmagineDrop=$('#try2');

var swap1 = ImmagineDrag.index();
var swap2 = ImmagineDrop.index();

ImmagineDrag.insertBefore($('.try').eq(swap2));
ImmagineDrop.insertBefore($('.try').eq(swap1));

为什么 divtry2会从 DOM 中移除？

Answer 1

如果您只想交换项目 2 和 3，您可以这样做：

$('#try3').insertBefore($('#try2'));

这里没有理由变得更复杂。如果你想交换项目 1 和 3，你可以这样做

$('#try3').insertBefore($('#try1'));
$('#try1').insertAfter($('#try2'));

您只需将项目放在您想要的位置。

编辑 ：

我制作了这个函数，它交换了同一个元素的两个子元素（我们可以概括，但这需要更多测试：最后一个孩子，唯一的孩子等）：

function swap($a, $b) { // a and b are (different) $jquery elements
    if ($b.index()<$a.index()) {
       var t = $a;
       $a = $b; $b = t;        
    }
    if ($b.index()==$a.index()+1) {
        $b.insertBefore($a);
    } else {
        var $c = $a.next();
        $a.insertBefore($b);
        $b.insertBefore($c);
    }
}

可以在这里测试：http: //jsfiddle.net/ferJR/

Answer 2

ImmagineDrop.insertBefore($('.try').eq(swap1)); 这时，$('.try').eq(swap1)是ImmagineDrop自己。

所以它与ImmagineDrop.insertBefore(ImmagineDrop);.

当您在元素本身之前插入一个元素时，它会导致它与文档分离。

Answer 3

这是为什么：

var ImmagineDrag=$('#try3');
var ImmagineDrop=$('#try2');

var swap1 = ImmagineDrag.index();
var swap2 = ImmagineDrop.index();
//at this point:
//  swap1 contains the value: 2
//  swap2 contains the value: 1

// $('.try').eq(swap2)  selects  $('#try2')
ImmagineDrag.insertBefore($('.try').eq(swap2));
// now $('#try3') has been inserted before '#try2'
// the order is now: try1, try3, try2

// the order of the nodes have changed :
//    swap1 is still 2,
//    so $('.try').eq(swap1) selects the third element
//    which is now '#try2'
// this action tries to insert '#try2' before itself !
ImmagineDrop.insertBefore($('.try').eq(swap1));
// hence your problem...

至于如何解决它：您可以使用占位符

function swap(node1, node2){ //2 nodes
     $placeHolder = $('<span>').insertBefore(node1);
     $(node1).insertBefore(node2);
     $(node2).insertBefore($placeHolder);
     $placeHolder.remove();
}

但请注意，如果 node1 == node2 或 node1 是 node2 的后代，则此类函数无法正常工作。