如何在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);
});
?

​

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