19

目標は、要素を左の兄弟の前または右の兄弟の後に移動することです。

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

要素のインデックスのみを指定すると、それを左または右に移動する必要があります。インデックスが1(innerTextとして「Two」を含むLI)であるとすると、それを左に移動したいので、出力は次のようになります。

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

5 に答える 5

28

要素を左また​​は右に移動する必要がある場合は、nextおよびのようなjQueryメソッドがありprev、適用できる次の要素と前の要素を取得するのに役立ちinsertAfterますinsertBefore

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

//Move left:
$(elementToBeMoved).insertBefore($(elementToBeMoved).prev());
于 2012-08-10T05:34:56.027 に答える
17
/**
 * @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/

于 2012-08-09T05:54:06.417 に答える
1

使いやすい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);
于 2020-09-09T10:36:43.847 に答える
0

ここで、リストを別のリストと交換できます

$.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);
  }
};
于 2015-02-19T04:58:10.193 に答える
0

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);
});
于 2015-05-26T10:44:45.763 に答える