将子元素范围包装在 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 中 的相关文章

随机推荐

  • 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