我可以围绕数组中的元素集合$ .wrap（）吗？

假设我有一系列“项目”，如下所示：

Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5 

我想循环遍历项目并将包含div的任何具有’group’类的内容包装起来以产生类似这样的内容（分组项目将始终紧挨着彼此）：

 
Item 1
 
Item 2
 
 
Item 3
 
Item 4
 
 
Item 5 

这是我得到的脚本：

 var group = []; $('.item').each(function(i, item){ if( $(item).hasClass('group') ) { group.push(item); } }); $(group).wrap('
'); 

会发生的事情是包装div在数组中分别缠绕在每个元素周围（这是有道理的）但我需要它将所有元素包装在一起。 有什么方法可以做到这一点吗？ 这是一个jsFiddle 。

编辑：这个问题有一个更复杂的变化是可能的，这将是这些组中有几个“集合”的情况，每个集合都包含在他们自己的“组”div中。 初始状态：

 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
 
Item 7
 
Item 8
 
Item 9 

期望的状态：

 
Item 1
 
Item 2
 
 
Item 3
 
Item 4
 
 
Item 5
 
 
Item 6
 
Item 7
 
Item 8
 
 
Item 9 

对不起我之前没有提到过。 谢谢！

Answer 1

请尝试使用wrapAll方法：

 $(".group").wrapAll("
"); 

演示： http ： //jsfiddle.net/LanMt/3/

---

要包装单独的.group元素组，您可以使用以下内容：

 $(".group").map(function() { if (!$(this).prev().hasClass("group")) { return $(this).nextUntil(":not(.group)").andSelf(); } }).wrap("
"); 

演示： http ： //jsfiddle.net/LanMt/5/

上面的代码是在@ Jon的回答的帮助下组装的 。

Answer 2

您可以使用.filter和.map的组合来实现所需的结果：

 $(".item.group") .filter(function() { return !$(this).prev().is(".group"); }) .map(function() { return $(this).nextUntil(":not(.group)").andSelf(); }) .wrap('
'); 

看到它在行动 。

JS Bin上的例子来解决当前的JSFiddle问题。

合理

方法.wrap将每个项目嵌入到您选择的标记内的当前jQuery对象中。 因此，如果要在同一个包装器中包含多个元素，则必须将这N个元素与jQuery对象匹配，然后创建另一个包含一个元素的jQuery对象：第一个jQuery对象。 后一个对象应该传递给.wrap 。

所以我们需要做的是为每个组创建一个jQuery对象，然后将所有这些对象放入另一个“master”jQuery对象中。 首先选择所有不在.group兄弟之前的.group元素：

 $(".item.group") .filter(function() { return !$(this).prev().is(".group"); }) 

从每个这样的元素，创建一个jQuery对象，其中包含该元素和所有后续兄弟与.group ：

 .map(function() { return $(this).nextUntil(":not(.group)").andSelf(); }) 

生成的jQuery对象会自动放在“master”对象中，因为它们取代了我们使用.filter在我们用$(".item.group")创建的jQuery对象中选择的裸元素。 最后一次调用.wrap …包装起来。 🙂

Answer 3

使用wrapAll而不是wrap。

 $(".group").wrapAll('
'); 

wrapAll的文档可以在http://api.jquery.com/wrapAll/找到

其他包装方法可在以下url找到： http：//api.jquery.com/category/manipulation/dom-insertion-around/

编辑：

对于可以有多个组的复杂情况，我们可以使用带有$ .each的wrapAll实现它，如下所示 –

 var group = []; $(".item").each( function(i, item) { if ($(item).hasClass("group")) { group.push(item); } else { $(group).wrapAll('
'); group = []; } } );