javascript - 如何将第 n 到第 n 个元素包装在 div 中

<分区>

我有这个:

<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>

我正在努力获得:

<div class="holder">
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
</div>
<div class="holder">
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
</div>

使用 jQuery。我试过使用 nth-child，但后来它用那个 div 包装了每个元素。

我正在尝试将每 5 个元素放入一个名为 holder 的 div 中。

尽管如此，我还是尝试使用“第 n 到 nth”元素 方法。换句话说，并不是假设每 5 个元素都被包裹，而是第 1 到第 5 个元素包裹在一个 div 中，也许第 6 到第 14 个元素包裹在另一个元素中。我们假设这 2 个批处理都用相同的类 holder 包装。

有什么动态的方法来批量处理这些吗？

最佳答案

您可以使用 each() 和 wrapAll() 来完成，

var tmp = $();
$(".myTest").each(function(i){
  tmp = tmp.add(this);
  if(((i+1) % 5) == 0){ 
    tmp.wrapAll("<div class='holder'>"); 
    tmp = $(); 
  }
});

DEMO

关于javascript - 如何将第 n 到第 n 个元素包装在 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36621050/

上一篇：html - 使用 flexbox 垂直对齐单个子元素

下一篇：Firefox 与 Chrome 中的 HTML 页面呈现问题 : Firefox fail?

javascript - 如何制作一个 Google Chrome 小书签来填充 URL 中的某个位置？

javascript - 在回调中调用 node.js 中的辅助函数？

javascript - 两个带参数的异步 Javascript 函数

html - 使用 CSS 水平居中画廊

javascript - jQuery change 和 HTML 的 onchange 有什么区别？

javascript - 创建后选择文本字段

javascript - jQuery - 如何使用 e.preventDefault();在 JavaScript 函数中

jQuery 在 jsFiddle 中可以运行，但在我的电脑上不行

html - CSS 3 : Correct "transition-property" for translate operation