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

2024-02-20

这是我上一个问题的后续问题(控制组:JQuery Mobile 上有 3 个水平按钮、多行 https://stackoverflow.com/questions/26088729/controlgroup-3-buttons-horizontal-multiple-rows-on-jquery-mobile)这个问题得到了很好的回答。

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

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

我已经更新了我的Demo http://jsfiddle.net/houtq5ku/1/,它将创建 4 个控件。当按下带有向下错误的按钮时,整个块应该向下移动。

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

您将需要使用.nextAll() http://api.jquery.com/nextall/, .nextUntil() http://api.jquery.com/nextuntil/, .prevUntil() http://api.jquery.com/prevuntil/, .addBack() http://api.jquery.com/addback/, .next() http://api.jquery.com/next/, .after() http://api.jquery.com/after/, .add() http://api.jquery.com/add/ and .eq() http://api.jquery.com/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")

    下一步按钮。现在我们已经收集了四个按钮(全部),但我们仍然需要merge它们成为一个物体。

  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 http://jsfiddle.net/Palestinian/w7gr54j9/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

  • 使用 FileSystem API 写入文件

    我正在尝试使用文件系统 API 创建一个文件 我用谷歌搜索并得到了一个代码 function onFs fs fs root getFile log txt create true exclusive true function fileE
  • 如何在ArangoDB中存储图像?

    我想将图像作为图像文件存储在 ArangoDb 中 我想知道是否有相同的 API 或 Java API 提前感谢您 在 ArangoDB 中存储二进制数据是一项长期存在的功能请求 https github com arangodb aran
  • 在 coreData xcode iphone 中创建复合谓词

    您好 我正在处理 3 个实体 班级 学生 考试记录 的核心数据及其关系区域 Class lt gt gt Students lt gt ExamRecord 我创建了一个谓词来获取第 5 班的学生列表 NSString fmt2 stude
  • 打开包含今天扩展的应用程序时崩溃

    我今天创建了扩展程序并添加了一个按钮来打开包含的应用程序 内部扩展视图控制器 IBAction func pressed extensionContext openURL NSURL string myApp completionHandl
  • Cordova 3.6:如何从 Android 中的照片库中提取 GPS Exif 数据?

    我正在使用 Cordova 3 6 x 和 Angularjs 开发一个应用程序 一切似乎都工作正常 除了我无法从照片库中拍摄的图像的 exif 数据中提取日期和位置 我的目标设备是 Android 4 从现在起我测试了 https git
  • 在我的应用程序中包含 SQL Server 2008 Express 的命名实例

    大家早上好 这是我在 stackoverflow 上的第一个问题 所以希望这不是被打死的东西 我还没有找到它 我正在开发一个将要分布式收缩包装的应用程序 我们已经获得了随我们的应用程序一起分发 SQL Server 2008 Express
  • 在 vscode 中打开特定文件的按键绑定

    我认为这可以通过编辑来实现keybindings json 由于我似乎找不到可用命令的列表 因此我已经通过自动完成完成了 key SHORTCUT command workbench action files openFile args A
  • 用于测试 RESTful Web 服务的工具 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试评估合适的工具来测试 RESTful Web 服务 并最终为我们的项目实现相同的自动化 当我
  • 如何传递jsonp格式的javascript代码并执行

    我们可以使用jsonp来克服JS的同域策略吗 我需要从域 x 运行脚本才能在域 y 上运行 那么是否可以发送脚本并执行 是的 那就是整个点JSONP 的 对于从何处加载脚本没有限制 除了通常的 http https 冲突
  • GHCi 中的类型家庭恶作剧

    这是我的代码 LANGUAGE TypeFamilies TypeOperators DataKinds PolyKinds FlexibleContexts UndecidableInstances module Foo where im
  • Android Studio - Gradle 清单合并失败

    我正在 android studio 中使用 actionbar sherlock 构建一个演示应用程序 我遇到了问题 在以下链接中提到 上一个问题 https stackoverflow com questions 17945111 ac
  • 错误(2,7):PLS-00428:此 SELECT 语句中需要 INTO 子句

    我正在尝试创建此触发器并收到以下编译器错误 create or replace TRIGGER RESTAR PLAZAS AFTER INSERT ON PLAN VUELO BEGIN SELECT F NRO VUELO M CAPA
  • Rust,如何使用DLL中的全局变量? C++ 等效项需要 __declspec(dllimport)

    Edit 经过一番研究 我找到了部分解决方案 这link name属性 https doc rust lang org reference items external blocks html the link name attribute
  • 如何使用c#检查程序中的图像质量?

    我想使用我的应用程序检查照片是否适合打印 我该怎么做 我对照片质量不太了解 每张照片的分辨率是否相同 我认为您可以确定地检查打印质量的唯一因素 因为其他因素是主观的 是图像的分辨率与预期的打印尺寸 如果您有其他具体要求 例如图像必须是彩色的
  • Python multiprocessing - 跟踪pool.map操作的过程

    我有一个执行一些模拟的功能 返回字符串格式的数组 我想运行模拟 函数 变化的输入参数值 超过 10000 个可能的输入值 并将结果写入单个文件 我正在使用多处理 特别是 pool map 函数 并行运行模拟 整个过程运行模拟功能超过1000
  • 如何将 Facebook onelogin 事件绑定到自定义按钮?

    我知道如何使用自定义按钮作为 Facebook 登录 现在我想bind onlogin事件到自定义按钮 但我不知道该怎么做 原始代码
  • 唯一索引不适用于 Mongoose / MongoDB

    我在使用 Mongoose MongoDb 创建唯一索引时遇到问题 无法让它工作 当我设置唯一索引时 我可以添加两个具有相同属性值的文档 我已经尝试了我能想到的一切 重新启动 一切 更改语法等 Code Addtion gt gt 这是我用
  • MongoDB 如何评估多个 $or 语句?

    MongoDB 将如何评估此查询 db testCol find or a 1 b 12 b 9 c 15 c 10 d foo 当扫描文档中的值时 如果第一个 OR 语句为 TRUE 其他语句也会被评估吗 从逻辑上讲 如果 MongoDB
  • 如何防止 UIButton 在按下时突出显示?

    When an UIButton按下后 正常情况是它会突出显示 即阴影层会覆盖图像 有没有办法防止这种情况发生 有没有一个属性可以处理这个问题 通常 您不会使用 Xcode 按按钮 而是使用手指 或鼠标 但撇开挑剔不谈 adjustsIma
  • 使用 JQuery Mobile 向上或向下移动控制组中的多个链接

    这是我上一个问题的后续问题 控制组 JQuery Mobile 上有 3 个水平按钮 多行 https stackoverflow com questions 26088729 controlgroup 3 buttons horizont