在div中包装子元素的范围 [英] Wrapping range of children elements in a div
问题描述
我正在尝试将div中的一系列子元素包装起来,以便在组中操作它们;试图将每个小组定位在不同的地方。场景是我有一个随机生成 li
标签的列表,无论出现多少,我需要分别操作每一组十个。
I'm trying to wrap a range of children elements in div in order to manipulate them in groups; trying to position each group in a different place. The scenario is that I have a list randomly generating li
tags and no matter how many appear I need every set of ten to be manipulated separately.
为了解决这个问题,我使用了一个书面清单:
To figure this out I'm using a written out list:
$("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>
但这不是我当然需要。
这是我现在正在处理的代码。
Here's the code I'm working on now.
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' />");
}
这种方法有效但它会创建移位类的嵌套实例。
This kind of works but it creates nested instances of the shift class.
我需要单独的包装器div。如果我要编写代码,那就是:
I need separate wrapper divs. If I was to make up code it would be:
$("ul li ul li:nth-child("+c+"<n<"+(c+10)+")").wrapAll("<span class='shift' />");
但显然这不起作用。其他人之前做过类似的事。一直没有成功搜索。
But obviously that won't work. Anyone else do something like this before. Been searching a bit with no success.
推荐答案
你可以试试。切片方法:
// note: different from nth-child, slice is 0-based position
$("ul li ul li").slice(c, c+10).wrapAll("<span class='shift' />");
这篇关于在div中包装子元素的范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!