Как перемещать или менять элементы в jQuery?

Целью является перемещение элемента перед его левым братом или после его правого брата.

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

Ответы

Ответ 1

/**
 * @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/

Ответ 2

Если вам нужен элемент для перемещения влево или вправо, существуют методы jQuery, такие как next и prev, чтобы помочь вам получить следующий и предыдущий элементы, где вы можете применить insertAfter или insertBefore.

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

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

Ответ 3

Здесь вы можете поменять список для другого

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

Ответ 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);
});