是否有一个原生的jQuery函数来切换元素？

Question

我可以轻松地用jQuery交换两个元素吗？

如果可能的话,我希望用一行来做这件事.

我有一个选择元素,我有两个按钮可以向上或向下移动选项,我已经选择了目标选择器,我用if做了,但我想知道是否有更简单的方法.

Answer 1

我找到了一种有趣的方法来解决这个问题,只使用jQuery:

$("#element1").before($("#element2"));

要么

$("#element1").after($("#element2"));

:)

Answer 2

保罗是对的,但我不确定他为什么克隆有关的元素.这不是必需的,并且会丢失与元素及其后代关联的任何引用或事件侦听器.

这是一个使用普通DOM方法的非克隆版本(因为jQuery实际上没有任何特殊的功能来使这个特定的操作更容易):

function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}

Answer 3

不,没有,但你可以鞭打一个:

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

用法:

$(selector1).swapWith(selector2);

请注意,这仅适用于选择器每个只匹配1个元素的情况,否则会产生奇怪的结果.

Answer 4

这个问题存在许多边缘情况,这些问题不是由接受的答案或bobince的答案处理的.涉及克隆的其他解决方案正在走上正轨,但克隆是昂贵且不必要的.我们很想克隆,因为如何交换两个变量的古老问题,其中一个步骤是将一个变量分配给一个临时变量.在这种情况下,不需要分配(克隆).这是一个基于jQuery的解决方案:

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

Answer 5

对于一般情况,这些答案中的许多答案都是错误的,如果它们实际上工作,则其他答案会不必要地复杂化.jQuery .before和.after方法完成了你想要做的大部分工作,但你需要第三个元素,就像许多交换算法的工作方式一样.这很简单 - 当你移动东西时,将一个临时DOM元素作为占位符.没有必要看看父母或兄弟姐妹,当然也没有必要克隆......

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);

  // create temporary placeholder
  var $temp = $("<div>");

  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.after($that).remove();

  return $this;
}

1)temp之前放临时divthis

2)this之前搬家that

3)that之后移动temp

3b)删除 temp

然后简单

$(selectorA).swapWith(selectorB);

演示:http://codepen.io/anon/pen/akYajE

Answer 6

你不应该需要两个克隆,一个会做.以Paolo Bergantino为例,我们有:

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

应该更快.传递两个元素中较小的元素也应该加快速度.

Answer 7

我之前使用过这样的技术.我将它用于http://mybackupbox.com上的连接器列表

// clone element1 and put the clone before element2
$('element1').clone().before('element2').end();

// replace the original element1 with element2
// leaving the element1 clone in it's place
$('element1').replaceWith('element2');