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

这是对我以前的问题（Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile）的后续问题，它很好地回答了。使用jQuery Mobile向上或向下移动控件组中的多个链接

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

我一直在使用append，prepend，之前，但似乎没有任何工作。

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

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

来源

2014-09-29 Paul Meems

有趣，但有点棘手来实现。增加额外的班级_might_可以带来一个解决方案。但是，由于您正在动态创建它们，所以类不会那么方便。 – Omar 2014-09-29 21:52:05

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

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

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

获取所有按钮在同一行的下按钮并.addBack()下按钮的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

来源

2014-09-29 22:08:45 Omar

谢谢@Omar。不仅可以按照您的要求进行演示，解释也非常有价值。 – 2014-09-30 10:52:20

@PaulMeems不客气:)我正在研究“向上箭头”btw。我会通知你，一旦我得到它的工作，因为它是相当复杂的:) – Omar 2014-09-30 10:54:02

@PaulMeems我已经更新了相同的演示，现在向上和向下按钮的工作。 – Omar 2014-09-30 11:26:01

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

回答

相关问题