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

这是我之前的问题（ 控制组：水平3个按钮，JQuery Mobile上的多行 ）的后续问题，这个问题得到了很好的解答。

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

我一直在使用append，prepend，after，之前似乎没什么用。

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

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

Answer 1

您需要使用.nextAll() .prevUntil() .addBack() .add() .eq() .add() .eq() .add()和.eq() 。

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

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

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

   获取向下按钮和.addBack() 向下按钮的同一行中的所有按钮到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); } }); 

演示