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>
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.
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.
function wrap_single(el, wrapper) { el. parentNode. insertBefore(wrapper, el); wrapper. appendChild(el); } let divWrapper; let elementToWrap; elementToWrap = document.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With