如何在jQuery中移动或交换元素？

Question

目标是将一个元素移动到其左侧兄弟元素之前或右侧兄弟元素之后。

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>One</li>
</ul>

假设我只有元素的索引，我需要将它向左或向右移动。举例来说，如果索引是1（包含 "Two" 作为 innerText 的 LI 元素），那么我想将它向左移动，输出结果应该是：

<ul>
    <li>Two</li>
    <li>One</li>
    <li>Three</li>
    <li>One</li>
</ul>

- kazinix

Answer 1

如果你需要将一个元素向左或右移动，可以使用 jQuery 的方法 next 和 prev 来获取下一个和上一个元素，然后对其应用 insertAfter 或 insertBefore 方法。

//Move right:
$(elementToBeMoved).insertAfter($(elementToBeMoved).next());

//Move left:
$(elementToBeMoved).insertBefore($(elementToBeMoved).prev());

- kazinix

---

完美，正是我所需要的！ - Vidar Vestnes

你的回答相比其他人的回答，简洁明了，美不胜收。 - Nathan

Answer 2

/**
 * @param siblings {jQuery} List of sibling elements to act upon
 * @param subjectIndex {int} Index of the item to be moved
 * @param objectIndex {int} Index of the item to move subject after
 */
var swapElements = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = siblings.get(objectIndex);
    // Insert subject after object
    subject.insertAfter(object);
}
$(function() {
    swapElements($('li'), 0, 1);
});
​

示例： http://jsfiddle.net/faceleg/FJt9X/2/

- Michael Robinson

---

您漏掉了一个右括号。 - kazinix

你能解释一下它是做什么的吗？ - kazinix

好的，假设要移动的元素索引是3，在你的代码中我应该把它放在哪里？ - kazinix

@dpp 我已经更新了答案，并添加了一个更易于理解的函数。 - Michael Robinson

不完全是我需要的，但它回答了我的问题并帮助我想出了更好的主意！ - kazinix

现在进行交换。测试一下使用 swapElements($('li'), 0, 3); 进行交换，结果应该是 Four,Two,Three,One 而不是 Two,Three,Four,One。 - RouR

Answer 3

我创建了一个易于使用的jQuery扩展

jQuery.fn.swap = function (newIndex) {
    if (!Number.isInteger(newIndex) && !['up', 'down'].includes(newIndex)) {
        throw new Error('Incorrect index format! Allowed formats are: "up", "down" or an index of the sibling to swap with');
    }
    if (Number.isInteger(newIndex)) {
        this.insertBefore(this.siblings()[newIndex]);
    } else {
        if (newIndex === 'up') {
            this.insertBefore($(this.siblings()[this.index() - 1]));
        } else {
            this.insertAfter($(this.siblings()[this.index()]));
        }
    }
}

在包含上述示例之后，此脚本可用于类似以下的 jQuery 对象：

$(this).swap('up');
$(this).swap('down');
$(this).swap(1);

- Henk Kuchelvork

Answer 4

https://jsfiddle.net/2c7Ltopf/1/

var swapElements = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = $(siblings.get(objectIndex));
    // Insert subject after object
    subject.insertAfter($(siblings.get(objectIndex)));

    if(objectIndex!==subjectIndex+1)
        $(siblings.get(objectIndex)).insertBefore($(siblings.get(subjectIndex+1)));
}

$(function() {
    swapElements($('li'), 1, 4);
});

- RouR

Answer 5

在这里，您可以将一个列表与另一个列表交换

$.fn.equals = function(compareTo) {
  if (!compareTo || this.length != compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

function swap(a, b) {
  a = $(a); b = $(b);

  if (a.length !== b.length) throw "Each list must be of equal length.";

  a.each( function(i,e){ _swap(e,b[i]) } );

  function _swap(a, b) {
    a = $(a); b = $(b);
    if (a.equals(b)) {return;}
    if (a.next().equals(b)) {a.before(b); return;}
    if (b.next().equals(a)) {b.before(a); return;}
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
  }
};

- Dominique Fortin