Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I $.wrap() around a collection of elements in an array?

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

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" />');
<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>

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.

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>
like image 374
igneosaur Avatar asked Jun 28 '12 10:06

igneosaur


People also ask

How do you wrap an array in Java?

IntBuffer wrap() method in Java An int array can be wrapped into a buffer using the method wrap() in the class java. nio. IntBuffer. This method requires a single parameter i.e. the array to be wrapped into a buffer and it returns the new buffer created.

What is wrapping in array?

Wraps its argument in an array unless it is already an array (or array-like). Specifically: If the argument is nil an empty array is returned. Otherwise, if the argument responds to to_ary it is invoked, and its result returned. Otherwise, returns an array with the argument as its single element.

How do you wrap an element in JavaScript?

function wrap_single(el, wrapper) { el. parentNode. insertBefore(wrapper, el); wrapper. appendChild(el); } let divWrapper; let elementToWrap; elementToWrap = document.

Is it possible to store the elements of an array?

Yes, since objects are also considered as datatypes (reference) in Java, you can create an array of the type of a particular class and, populate it with instances of that class.


1 Answers

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.

like image 127
VisioN Avatar answered Nov 06 '22 15:11

VisioN