javascript - 使用 JQuery Mobile 向上或向下移动控制组中的多个链接

Question

这是我上一个问题 ( Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile ) 的后续问题，回答得很好。

我现在有多个垂直“控件”，每个控件由 4 个带有水平图像的链接组成。 其中一个图像是向下移动。当按下此图像按钮/链接时，4 个链接的整个控件应向下移动 1。

我一直在使用 append、prepend、after、before 但似乎没有任何效果。

我已经更新了我的 Demo ，它将创建 4 个控件。当按下错误的按钮时，整个 block 应该向下移动。

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

Answer 1

您将需要使用 .nextAll() , .nextUntil() , .prevUntil() , .addBack() , .next() , .after() , .add()和 .eq() .

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

   检查当前组之后是否有一组按钮。

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

   获取down按钮和.addBack()down按钮同一行的所有按钮到jQuery集合对象。现在我们有三个按钮。

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

   下一步按钮。现在我们已经收集了四个按钮(全部)，但我们仍然需要将它们合并到一个对象中。

4. prevBtns.add(nextBtn)

   将所有按钮合并到一个对象/变量中。

5. moveAfter.after(setBtns)

   将所有按钮移动/附加到当前按钮组下方的行之后。

$("#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