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
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);
moveAfter.after(setBtns);
}
});
source to share