我可以在数组中的元素集合$ $ .wrap（）吗？ [英] Can I $.wrap() around a collection of elements in an array?

问题描述

假设我收集了这样的项目：

 < p class =item>项目1< / p> 
< p class =item>项目2< / p> 
< p class =item group>项3< / p> 
< p class =item group>项目4< / p> 
< p class =item>项目5< / p> 
  

我想循环遍历项目，并将包含的div包含在任何具有'group'类的div导致这样的事情（分组的项目将始终彼此相邻）：

  < p class =item>项1< / p> 
< p class =item>项目2< / p> 
< div class =wrapper> 
< p class =item group>项3< / p> 
< p class =item group>项目4< / p> 
< / div> 
< p class =item>项目5< / p> 
  

这是我得到的脚本：

  var group = []; 
 
 $（'。item'）。each（function（i，item）{
 if（$（item）.hasClass（'group'））{
 group。 push（item）; 
} 
}）; 
 
 $（group）.wrap（'< div class =wrapper/>'）; 
  

发生什么是包装div在数组中分开包围每个元素（这是有道理的）但我需要它将所有元素包装在一起。有什么办法可以做到吗？以下是 jsFiddle 。

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

 < p class =item>项目1< / p> 
< p class =item>项目2< / p> 
< p class =item group>项3< / p> 
< p class =item group>项目4< / p> 
< p class =item>项目5< / p> 
< p class =item group>项目6< / p> 
< p class =item group>项目7< / p> 
< p class =item group>项目8< / p> 
< p class =item>项目9< / p> 
  

所需状态：

 < p class =item>项1< / p> 
< p class =item>项目2< / p> 
< div class =wrapper> 
< p class =item group>项3< / p> 
< p class =item group>项目4< / p> 
< / div> 
< p class =item>项目5< / p> 
< div class =wrapper> 
< p class =item group>项目6< / p> 
< p class =item group>项目7< / p> 
< p class =item group>项目8< / p> 
< / div> 
< p class =item>项目9< / p> 
  

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

解决方案

尝试 wrapAll 方法：

  $（ .group）。wrapAll（< div class ='wrap'/>）; 
  

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

---

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

  $（。group）。map（function（）{
 if（！$（this）.prev（）。hasClass（group））{
 return $（this）.nextUntil（：not（.group））。andSelf（）; 
} 
}）。wrap（< div class ='wrap'/>）; 
  

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

上面的代码是 @ Jon的回答的帮助。

Let's say I have a collection of 'items' like so:

<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>

I want to loop through the items and wrap a containing div around any that have the 'group' class to result in something like this (grouped items will always be right next to one another):

<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>

This is the script I've got:

var group = [];

$('.item').each(function(i, item){
    if( $(item).hasClass('group') ) {
        group.push(item);
    }
});

$(group).wrap('<div class="wrapper" />');

What happens is that the wrapping div is wrapped around each element separately in the array (which makes sense) but I need it to wrap all elements together. Is there any way I can do this? Here's a jsFiddle.

Edit: There is a more complex variation of this problem that is possible, this would be a situation where there are several 'sets' of these groups, each to be wrapped in their own 'group' div. Initial state:

<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>

Desired state:

<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>

Sorry I didn't mention that before. Thanks!

解决方案

Try wrapAll method instead:

$(".group").wrapAll("<div class='wrap' />");

DEMO: http://jsfiddle.net/LanMt/3/

---

For wrapping the separate groups of .group elements you can use the following:

$(".group").map(function() {
    if (!$(this).prev().hasClass("group")) {
        return $(this).nextUntil(":not(.group)").andSelf();
    }
}).wrap("<div class='wrap' />");

DEMO: http://jsfiddle.net/LanMt/5/

The code above was assembled with the help of @Jon's answer.

这篇关于我可以在数组中的元素集合$ $ .wrap（）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！