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

【问题标题】：Move multiple links in controlgroup up or down using JQuery Mobile使用 JQuery Mobile 向上或向下移动控制组中的多个链接
【发布时间】：2014-09-30 06:31:29
【问题描述】：

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

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

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

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

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

【问题讨论】：

有趣，但实现起来有点棘手。添加额外的类可能会导致解决方案。但是，由于您是动态创建它们，因此类不会那么方便。

标签： javascript jquery css jquery-mobile

【解决方案1】：

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

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

检查当前集合之后是否还有一组按钮。
$(this).prevUntil(".ui-last-child").addBack()

获取down按钮和.addBack()down按钮同一行的所有按钮到jQuery集合对象。现在我们有了三个按钮。
$(this).next(".ui-last-child")

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

将所有按钮合并到一个对象/变量中。
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

【讨论】：

谢谢@Omar。不仅可以按要求运行您的演示，而且解释也非常有价值。
@PaulMeems 不客气 :) 我正在研究“向上箭头”顺便说一句。一旦我得到它的工作，我会通知你，因为它相当复杂:)
@PaulMeems 我已经更新了同一个演示，现在向上和向下按钮都可以工作了。