Move Multiple Links In Controlgroup Up Or Down Using Jquery Mobile

This is a follow-up question on my previous question (Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile) which was nicely answered. I now have multiple 'controls'

Solution 1:

You will need to use .nextAll(), .nextUntil(), .prevUntil(), .addBack(), .next(), .after(), .add() and .eq().

1. $(this).nextAll(".ui-last-child").eq(1)

   Check if there is a set of buttons after the current set.

2. $(this).prevUntil(".ui-last-child").addBack()

   Get all buttons in the same row of the down button and .addBack()down button to jQuery collection object. Now we have three buttons.

3. $(this).next(".ui-last-child")

   Next button. Now we have collected four buttons (all of them) but still we need to merge them into one object.

4. prevBtns.add(nextBtn)

   Merge all buttons into one object/variable.

5. moveAfter.after(setBtns)

   Move/append all buttons after the row below current set of buttons.

$("#layercontrol").on("click", ".down", function () {
    var moveAfter = $(this).nextAll(".ui-last-child").eq(1);
    if (moveAfter.length > 0) {
        var prevBtns = $(this).prevUntil(".ui-last-child").addBack(),
            nextBtn = $(this).next(".ui-last-child"),
            setBtns = prevBtns.add(nextBtn);
            moveAfter.after(setBtns);
    }
});

Demo