The goal is to move an element before its left sibling or after its right sibling.
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>One</li> </ul> Given only the index of the element, I need to move it to left or right. Say the index is 1 (LI with "Two" as innerText), then I want to move it to left, the output should be:
<ul> <li>Two</li> <li>One</li> <li>Three</li> <li>One</li> </ul> If you need an element to be moved left or right, there are jQuery methods like next and prev to help you get the next and previous elements where you can apply insertAfter or insertBefore.
//Move right: $(elementToBeMoved).insertAfter($(elementToBeMoved).next()); //Move left: $(elementToBeMoved).insertBefore($(elementToBeMoved).prev()); 
/** * @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); });
Working example: http://jsfiddle.net/faceleg/FJt9X/2/
I've made a jquery extension that's easy to use
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()])); } } } After including above sample this script can be used on jquery objects like:
$(this).swap('up'); $(this).swap('down'); $(this).swap(1); Here you can swap a list for another
$.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); } }; 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); }); 