使用JQuery Mobile向上或向下移动控件组中的多个链接 [英] Move multiple links in controlgroup up or down using JQuery Mobile

问题描述

这是我上一个问题的后续问题( Controlgroup:水平3个按钮，在JQuery Mobile上为多行)，很好回答.

This is a follow-up question on my previous question (Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile) which was nicely answered.

我现在在垂直方向上有多个控件"，每个控件都由4个水平链接的图像组成. 图像之一是向下移动.按下此图像按钮/链接时，整个4个链接的控件应向下移动1个.

I now have multiple 'controls' vertically and each control is made of 4 links with images horizontally. One of the images is to move down. When this image button/link is pressed the whole control of 4 links should move 1 down.

我一直在使用append，prepend，after，fore，但似乎没有任何作用.

I've been using append, prepend, after, before but nothing seems to work.

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

I have updated my Demo, it will create 4 controls. When the button with the down error is pressed, the whole block should move down.

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

推荐答案

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

You will need to use .nextAll(), .nextUntil(), .prevUntil(), .addBack(), .next(), .after(), .add() and .eq().

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

检查在当前按钮之后是否还有一组按钮.

Check if there is a set of buttons after the current set.

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

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

Get all buttons in the same row of the down button and .addBack() down button to jQuery collection object. Now we have three buttons.

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

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

Next button. Now we have collected four buttons (all of them) but still we need to merge them into one object.

prevBtns.add(nextBtn)

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

Merge all buttons into one object/variable.

moveAfter.after(setBtns)

将所有按钮移动/追加到当前按钮组下面的行之后.

Move/append all buttons after the row below current set of buttons.

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

这篇关于使用JQuery Mobile向上或向下移动控件组中的多个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！