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

Question

这是关于我上一个问题（Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile）的后续问题，答案很清楚。

我现在有多个控件＆＃39;垂直，每个控件由4个水平图像链接组成。 其中一张图片是向下移动。按下此图像按钮/链接时，4个链接的整个控制应该向下移动1。

我一直在使用追加，前置，之后，之前似乎没有任何作用。

我更新了Demo，它会创建4个控件。当按下具有向下错误的按钮时，整个块应该向下移动。

// 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