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

Question

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

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

仅给定元素的索引，我需要将其向左或向右移动。假设索引为 1（LI 与“Two”作为 innerText），那么我想将它移到左边，输出应该是：

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

Answer 1

如果您需要向左或向右移动元素，可以使用 jQuery 方法，例如next和prev来帮助您获取可以应用的下一个和上一个元素insertAfter或insertBefore。

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

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

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

​</p>

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

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

Answer 4

在这里你可以将一个列表换成另一个

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

Answer 5

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