javascript - .insertBefore() 在 2 个 div 之间切换位置 (HTML)

Question

示例 HTML：

<h2 class="x1">1</h2>
<h2 class="x2">2</h2>
<h2 class="x3">3</h2>
<h2 class="x4">4</h2>
<h2 class="x5">5</h2>

我想换...

1
2 <---
3     |
4     |
5 <---

所以我喜欢这个

$('.x2').insertBefore('.x5');
$('.x5').insertBefore('.x2');

所以我得到这样的结果

1
3
4
5 <--- 
2 <--- 

我怎样才能得到...的结果？

1
5 <---
3     |
4     |
2 <---

游乐场：http: //jsfiddle.net/l2aelba/aHwSJ/

PS：如果可能的话，我不想这样做

$('.x2').insertBefore('.x5');
$('.x5').insertBefore('.x3');

我只需要选择元素 2 个元素（不是另一个）

Answer 1

您想.x5在 的下一个兄弟之前插入.x2，而不是在.x2其自身之前。

var next = $('.x2').next();
$('.x2').insertBefore('.x5');
$('.x5').insertBefore(next);

但这仅在.x2不是最后一个兄弟姐妹时才有效。

Answer 2

尝试

var pos = $('.x2').index();
$('.x2').insertBefore('.x5');
$('.x5').insertBefore($('h2').eq(pos));

演示：小提琴

如果元素的顺序发生变化，前一个可能不起作用，试试这个

var el1 = $('.x4'), el2 = $('.x1'), el1prev = el1.prev();
el1.insertBefore(el2);
if(el1prev.length){
    el2.insertAfter(el1prev);
} else {
    el2.insertAfter($('h2').eq(0));
}

演示：小提琴

Answer 3

从这个好的解决方案https://stackoverflow.com/a/698386/975520开始，您可以编写自己的 jQuery 函数来处理切换功能。

这是代码：

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

并像这样使用它：

$(document).ready(function () {
    $('.x5').swapWith('.x2');
});

我很欣赏这个解决方案，因为使用该deep clone方法可以保留所有绑定事件。

这是一个工作小提琴：http: //jsfiddle.net/IrvinDominin/axvp9/

Answer 4

使用临时 div：

var x2 = $('.x2');
var x5 = $('.x5');
var div =$('<div>');

x2.replaceWith(div);
x5.replaceWith(x2);
div.replaceWith(x5);

Answer 5

试试这个：http: //jsfiddle.net/aHwSJ/1/

HTML：

<h2 class="x1">1</h2> 
<h2 class="x2">2</h2> 
<h2 class="x3">3</h2> 
<h2 class="x4">4</h2> 
<h2 class="x5">5</h2>

代码：

var pos = $(".x2").next();
$('.x2').insertBefore('.x5');
$('.x5').insertBefore(pos);