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

Question

Code：

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

为什么div try2将从DOM中删除？

Answer 1

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

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

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

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

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

编辑：

我创建了这个函数，它交换了2个元素，这些元素是同一个元素的子元素（我们可以概括，但这需要更多测试：最后一个孩子，只有孩子等等）：

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的后代，则此类函数无法正常工作。