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本身之前插入。{/ p>

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

演示：Fiddle

如果元素的顺序发生变化try this

，前一个可能无效

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

演示：Fiddle

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

.insertBefore（）在2个div之间切换位置（HTML）

5 个答案: