I'm trying to wrap multiple same class divs into a div and to skip divs not with the same class. .wrap doesn't combine them, and .wrapAll throws the non-classed divs underneath. I've been tinkering around with attempts to create an alternate solution but with no avail.
Original
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div>Skip in wrap</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
continued...
Wanted Result
<div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
</div>
<div>Skip in wrap</div>
<div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
</div>
I just whipped up a simple custom solution.
You can loop pretty quickly through your
<div>
elements using afor
loop. In the below code, just change the initial selector here to grab all those siblings divs, e.g.#content > div.entry
or wherever they are:You can give it a try here. We're just looping through, the
.entry
<div>
elements using.nextUntil()
to get all the.entry
elements until there is a non-.entry
one using the:not()
selector. Then we're taking those next elements, plus the one we started with (.andSelf()
) and doing a.wrapAll()
on that group. After they're wrapped, we're skipping ahead either that many elements in the loop.You could alternatively append new divs to your markup, and then append the content you want wrapped into those.
If your markup is this:
Use the following to append two new divs (
column-one
andcolumn-two
) and then append the appropriate content into those divs:Demo here: http://codepen.io/zgreen/pen/FKvLH