Move multiple links in a control group up or down with JQuery Mobile

This is the next question on my previous question ( Controlgroup: 3 buttons horizontally, multiple lines on jQuery Mobile ) which was nice to answer.

Now I have several "controls" vertically and each control consists of 4 image links horizontally. One of the images is to move down. When this button / image link is clicked, the entire 4-link control should move 1 down.

I am using append, prepend, after, before, but nothing seems to work.

I updated Demo , it will create 4 controls. When the button with the lowered error is pressed, the entire block should go down.

// Check if not already at the end:  
if (layerVisibleButton.length > 0) {
    // TODO: How to continue?



source to share

1 answer

You will need to use the .nextAll()

, .nextUntil()

, .prevUntil()

, .addBack()

, .next()

, .after()

, .add()

and .eq()


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

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

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

    Get all buttons on one row, down button and .addBack()

    down button into a jQuery collection object. We now have three buttons.

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

    Next button. We have now collected four buttons (all of them), but still we need to combine them into one object.

  • prevBtns.add(nextBtn)

    Combine all buttons into one object / variable.

  • moveAfter.after(setBtns)

    Move / add all buttons after the row below the 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);





All Articles