假设我有一组'项目',如下所示:
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
<p class="item">Item 5</p>
我想循环遍历项目并将包含div的任何具有'group'类的内容包装起来以产生类似这样的内容(分组项目将始终紧挨着彼此):
这是我得到的剧本:
var group = [];
$('.item').each(function(i, item) {
if ($(item).hasClass('group')) {
group.push(item);
}
});
$(group).wrap('<div class="wrapper" />');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<div class="wrapper">
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
</div>
<p class="item">Item 5</p>
会发生什么是包装div在数组中分别包围每个元素(这是有道理的)但我需要它将所有元素包装在一起。有什么方法可以做到这一点吗?这是一个jsFiddle。
这个问题有一个更复杂的变化是可能的,这将是这些群体中有几个“集合”的情况,每个集合都包含在他们自己的“组”div
中。初始状态:
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
<p class="item">Item 5</p>
<p class="item group">Item 6</p>
<p class="item group">Item 7</p>
<p class="item group">Item 8</p>
<p class="item">Item 9</p>
期望的状态:
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<div class="wrapper">
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
</div>
<p class="item">Item 5</p>
<div class="wrapper">
<p class="item group">Item 6</p>
<p class="item group">Item 7</p>
<p class="item group">Item 8</p>
</div>
<p class="item">Item 9</p>
请尝试使用wrapAll
方法:
$(".group").wrapAll("<div class='wrap' />");
但是:ぁzxswい
要包装单独的http://jsfiddle.net/LanMt/3/元素组,您可以使用以下内容:
.group
但是:ぁzxswい
上面的代码是在$(".group").map(function() {
if (!$(this).prev().hasClass("group")) {
return $(this).nextUntil(":not(.group)").andSelf();
}
}).wrap("<div class='wrap' />");
的帮助下组装的。
您可以使用http://jsfiddle.net/LanMt/5/和@Jon's answer的组合来实现所需的结果:
.filter
.map
。
$(".item.group")
.filter(function() {
return !$(this).prev().is(".group");
})
.map(function() {
return $(this).nextUntil(":not(.group)").andSelf();
})
.wrap('<div class="wrap" />');
解决当前的JSFiddle问题。
方法See it in action将每个项目嵌入到您选择的标记内的当前jQuery对象中。因此,如果要在同一个包装器中包含多个元素,则必须将这N个元素与jQuery对象匹配,然后创建另一个包含一个元素的jQuery对象:第一个jQuery对象。这是后一个对象,你应该传递给Example on JS Bin。
所以我们需要做的是为每个组创建一个jQuery对象,然后将所有这些对象放入另一个“master”jQuery对象中。首先选择所有.wrap
元素,这些元素本身不是.wrap
兄弟:
.group
从每个这样的元素,创建一个jQuery对象,其中包含元素和所有后续兄弟与.group
:
$(".item.group")
.filter(function() {
return !$(this).prev().is(".group");
})
生成的jQuery对象会自动放置在“master”对象中,因为它们取代了我们使用.group
在我们使用.map(function() {
return $(this).nextUntil(":not(.group)").andSelf();
})
创建的jQuery对象中选择的裸元素。最后一次打电话给.filter
...包装好了。 :)
使用wrapAll而不是wrap。
$(".item.group")
wrapAll的文档可以在 - .wrap
找到
其他包装方法可在 - $(".group").wrapAll('<div class="wrap" />');
找到
编辑:
对于可以有多个组的复杂情况,我们可以使用带有$ .each的wrapAll实现它,如下所示 -
http://api.jquery.com/wrapAll/