将子元素范围包装在 div 中

2024-01-02

我试图将一系列子元素包装在 div 中,以便分组操作它们;尝试将每个组定位在不同的位置。场景是我有一个随机生成的列表li标签,无论出现多少个,我都需要单独操作每组十个标签。

为了解决这个问题,我使用了一个书面列表:

$("ul li ul li:nth-child(n+11)").wrapAll("<span class='shift' />");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="access">
  <div class="menu">
    <ul>
      <li>
        <p>Hello</p>
        <ul>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>

        </ul>
      </li>
    </ul>
  </div>
</div>

但这当然不是我需要的。

这是我现在正在处理的代码。

var count = $("ul li ul li").length;
for(var c = 11; c<=count;c+=10){
$("ul li ul li:nth-child(n+"+c+")").wrapAll("<span class='shift' />");
}

这种方法可行,但它会创建班次类的嵌套实例。

我需要单独的包装 div。如果我要编写代码,它将是:

 $("ul li ul li:nth-child("+c+"<n<"+(c+10)+")").wrapAll("<span class='shift' />");

但显然这行不通。其他人以前也做过类似的事情。一直在寻找,但没有成功。


你可以尝试.slice http://api.jquery.com/slice/ method:

// note: different from nth-child, slice is 0-based position
$("ul li ul li").slice(c, c+10).wrapAll("<span class='shift' />");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将子元素范围包装在 div 中 的相关文章

  • 粉碎一个元素,向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef
  • Chart.js - 如何将数组集合推入数据集

    我一直在尝试多种方法将数组集合推送到数据集中 任何人都可以帮助我根据下面的代码将数组推入堆积图表中 这是例子 Codepen 堆叠栏 https codepen io narendrajadhav pen abzpWam JavaScrip
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 如何获得相对于特定父级的偏移量?

    我想获取元素相对于的偏移量特定的父母不是直接的 也不是文档 我在互联网上查找并找到了offset http api jquery com offset and position http api jquery com position jQ
  • Python 将列表中的字符串转换为数字

    我遇到了以下错误消息 以 10 为基数的 int 的文字无效 2 2 外部用单引号括起来 内部用双引号括起来 该数据位于primes列出使用print primes 0 样本数据在primes list 2 3 5 7 The primes
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 将 javascript 放在 header 之外有多糟糕?

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用
  • jQuery 中如何判断 JSON 对象是否为空

    我有以下 JSON meta limit 20 next null offset 0 previous null total count 0 objects 我对对象感兴趣 我想知道对象是否为空并显示警报 像这样的东西 success fu
  • 使用 Javascript 对象模型在 SharePoint 任务上设置“分配给”

    我想创建一个共享点任务并将其分配给我自己 当前用户 在 javascript 对象模型中 我有下面的代码 但我认为我需要设置 spusercollection 对象 而不是设置特定用户 但是 我似乎无法在任何地方找到如何执行此操作的任何示例
  • jquery 事件委托

    我正在尝试使用事件委托重写一段代码 希望它能停止与另一个 js 代码段发生冲突 但我已经破解了密码 原来的 to scale up on hover var current h null var current w null piccon
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 标记内的值发生变化时调用函数

    JavaScript 有没有什么方法可以在段落标记的值更改时调用函数 概述 HTML p 00 00 p
  • 上传前如何检查图片的宽度和高度

    对于图片上传 我编写了以下 html 代码
  • 使用 jquery 删除空

    我有像上面这样的代码 ul li a href Default aspx Menu a ul li a href Content aspx ID 153 SubMenu a li ul li ul
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • .parents() 没有 jquery - 或 querySelectorAll 为父母[重复]

    这个问题在这里已经有答案了 可能的重复 使用 matchesSelector js 检查 event target parentElement https stackoverflow com questions 12977658 check
  • 在 Sublime Text 下获取完整的 JS 自动补全

    我刚刚在 Windows Vista 下安装了 Sublime Text 甚至遵循了中给出的建议这个帖子 https stackoverflow com questions 10636410 modifying sublime text 2
  • 在 Map() 的条目上使用 Promise.all

    我正在使用 Map 来表示一些键 值对 let myMap new Map myMap set foo bar myMap set foo2 bar42 对于每个 Map 条目 我执行一个返回 Promise 的函数 所有这些 Promis
  • 处理延迟对象数组

    自从使用 Deferred我已经遇到过这种情况几次 我有一个值列表 每个值都以某种方式生成一个延迟对象 并且我想在所有延迟对象都解析后执行回调 一个更具体的例子是这样的 var urls foo com bar com baz com qu
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • javascript - eCharts - 多个 y 轴彼此重叠

    I use eCharts JavaScript 插件 https ecomfe github io echarts doc public en index html创建折线图 正如您在下面所附的图片中看到的 y 轴彼此重叠 这是我使用的选
  • 如何使用MEF初始化viewModel?

    我有一个名为 ModuleMenu 的模块 在这个模块中 我有一个名为 MenuView 的 UserControl 和一个名为 UserControlViewModel 的相应 ViewModel 我还有一个名为 Module 的类 全部
  • Android BLE:onServicesDiscovered 在 Nexus 5 或 Samsung Note 3 上永远不会触发

    我正在开发一个连接到自定义蓝牙设备的 Android 应用程序 许多帖子非常有帮助 例如this https stackoverflow com questions 17870189 android 4 3 bluetooth low en
  • 重新启动自动热键脚本的热键?

    假设我有一个自动热键脚本C path to my script跑步 有没有办法定义一个重新启动的热键 In order to prevent duplicate instances I normally do not re launch a
  • 如何为某些类型创建专门的类型类,为其余类型创建默认实现

    我想要一个类型的类型类 在可能的情况下可以将其转换为其他类型 class Castable a b where cast a gt Maybe b cast Nothing default implementation 现在该类将为某些类型
  • sendmailR:将编码消息提交到本地 SMTP 服务器

    我需要您的帮助 以便使用函数 sendmail sendmailR 从 R 中发送包含希腊语文本的电子邮件 我尝试使用该功能iconv 就像这样 但没有成功 subject lt iconv text in greek to CP1253
  • 如何console.log到父窗口?

    我有一个基本上刷新表的函数 它工作正常 但某些 JS 函数无法运行 为了调试 我尝试在弹出窗口与其父窗口之间传递数据 目前我有这个功能 fn runFncs function isParent if isParent 1 window op
  • IONIC 3:onNotification 不在 IOS 前台触发?

    我已经在 ionic 中实现了推送通知 一切在 Android 上运行良好 但在 IOS 中出现了不同的情况 在前台 onNotification 没有被触发 并且 android 工作完美 背景 收到推送通知 但点击通知后没有任何反应 应
  • CSS 中“*”的含义[重复]

    这个问题在这里已经有答案了 可能的重复 css 标记的含义 https stackoverflow com questions 3359201 css the meaning of mark 什么是 在CSS中做什么 我看到了一些代码her
  • 退出前恢复中断的不可取消任务

    我正在阅读一些java线程中断 但我不明白一些东西 希望有人能给我解释一下 于是 就完成了下面的代码 public Integer getInteger BlockingQueue
  • 如何使用 jQuery 销毁 DOM 元素?

    假设 jQuery 对象是 target Is target remove 你在找什么 https api jquery com remove https api jquery com remove
  • 如何解决错误:imread 不是 cv 的成员?

    我使用 OpenCV 3 0 和 Ubuntu 14 04 我正在尝试使用 OpenCV 在 Ubuntu 上编译一些代码 我收到错误 错误 imread 不是 cv 的成员 由于我之前的搜索知识 我尝试通过添加 highgui h 进行编
  • rmi ejb 调用中可重用登录会话的概念

    这不是一个简单的问题 只是因为我正在重新考虑通过登录和安全保护 EJB 3 0 服务的架构 我们在 JBoss 5 1 上有一个 EJB3 0 应用程序 它为 SWT 客户端提供各种服务来读取和写入数据 要使用服务 客户端必须使用有效的用户
  • 如何让 rufus-scheduler 与部署到 Heroku 的 Rails 应用程序一起工作?

    In config initializers我创建了一个名为task scheduler rb它包含以下代码 require rufus scheduler require mechanize scheduler Rufus Schedul
  • 使用 Guzzle 6 将文件上传到 API 端点

    我可以使用 Postman 将文件上传到 API 端点 我正在尝试将其转换为从表单上传文件 使用 Laravel 上传文件并使用 Guzzle 6 发布到端点 Screenshot of how it looks in Postman I
  • document.ActiveElement 不返回 Safari 中的活动元素

    在我正在编写的网站中 需要在发生某些事情之前显示一些确认文本 我使用的解决方案在单击按钮时显示一个模式窗口 当窗口关闭时 Jquery 会查看单击了哪个按钮 所以我有以下注销确认信息 function logOut on click fun
  • 无法更新 XCode:空间不足[重复]

    这个问题在这里已经有答案了 我正在尝试将 XCode 从 11 2 1 更新到 12 4 我从应用程序商店安装了 XCode 因此我尝试从那里更新它 我有 27 GB 的可用空间 但每次尝试更新时 都会提示我没有足够的空间 我不认为还有什么
  • Neoclipse 的替代品 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在玩neo4j来用JAVA存储一些数据 我希望有一个好方法来可视化我的 neo4j 数据库并查看属性等 主要是为了获得反馈并了解我在数
  • macOS 应用程序:处理绑定到全局键盘快捷键的组合键

    在某些应用程序中 应用程序直接处理键盘快捷键是有意义的 否则这些快捷键将绑定到系统范围的组合 例如 Space 通常是 Spotlight 或 Tab 通常是应用程序切换器 这适用于各种 Mac 应用程序 例如 VMWare Fusion
  • 将子元素范围包装在 div 中

    我试图将一系列子元素包装在 div 中 以便分组操作它们 尝试将每个组定位在不同的位置 场景是我有一个随机生成的列表li标签 无论出现多少个 我都需要单独操作每组十个标签 为了解决这个问题 我使用了一个书面列表 ul li ul li nt