jquery wrapping groups of adjacent elements

Question

I have a cms that lets users insert blocks of content on a page. There are different types of content block available to the user and they can be inserted in any order. An e

Answer 1

You can use

1. .nextUntil, to get all the next .box.
2. .andSelf to add the current element to the collection
3. .wrapAll to wrap each collection to a different .container

$('.box').not('.box+.box').each(function(){
  $(this).nextUntil(':not(.box)').addBack().wrapAll('<div class="container" />');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some rich text</p>

<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>

<h3>Some  more rich text</h3>
<p>Lorem ipsum</p>

<div class="box">...</div>
<div class="box">...</div>

http://jsbin.com/gonino/edit?html,js

Answer 2

The fiddle is here: http://jsfiddle.net/jdelight/XutA6/5/ Here's a possible solution using css which lets you style the blocks with a single background colour and border. The HTML would be something like this:

    <div class="block">this is block 1</div>
    <div class="block">this is block 2</div>
    <div class="block">this is block 3</div>
    <div class="block">this is block 4</div>
    <div class="block">this is block 5</div>

And the CSS would be:

            /* style all blocks with the required background colour and border */
        .block {
            background: #eee;
            color: #000;
            border: 1px solid red;
            border-bottom: 0;
            padding: 20px;
            width: 400px;
            border-radius: 20px;
            /* remove the rounded corners from he bottom left/right */
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
            position: relative;
        }
        /* style all adjacent blocks and remove the radius - so the top block has a radius and the others don't */
        .block + .block {
            border-radius: 0;
            border-top: 0;
        }

        /* create a cheeky block with content after which sits below all blocks */
        /* so it's hidden from all the blocks above it apart from the very bottom one (see bottom: -10px) */
        /* then style the rounded corners on that one */
        .block::after {
            content:'.';
            display: block;
            background: red;
            height: 10px;
            position: absolute;
            border-bottom: 1px solid red;
            border-left:  1px solid red;
            border-right:  1px solid red;
            bottom: -10px;
            width: 440px;
            background: #eee;
            left:-1px;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
        }

Answer 3

Well you could do it like this JSFiddle example I've just whipped up.

This basically loops through each .box adding it to an array and determining whether the next element also has the .box class:

var collection = [];
$('.box').each(function() {
    var nextBox = $(this).next().hasClass('box');
    ...
    collection.push($(this));
})

If it the next element doesn't have a .box class, it creates the containing divider, puts it on the page before the first .box within the collection array is located, then uses appendTo to move all the .box dividers into it:

    if(!nextBox)
    {
        var container = $('<div class="collection"></div>');
        container.insertBefore(collection[0]);
        for(i=0;i<collection.length;i++)
        {
            collection[i].appendTo(container);
        }
        collection = [];
    }