How to move or swap elements in jQuery?

user_724689 0
Viewed 18726

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>
html jquery
5 Answers

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