jQuery grouping adjacent elements

Question

jQuery grouping adjacent elements

My content management system allows users to easily insert blocks of content onto a page. These blocks can be of different types and inserted in any order. A sample high-level DOM structure may appear like this:

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

I am looking to group any adjacent 'box' divs within a wrapping 'container' div. In the given example, two 'container' divs would need to be added as there are two sets of box divs, resulting in:

<p>Some rich text</p>

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

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

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

I don't believe this can be achieved with CSS selectors, so I'm curious if anyone knows how to accomplish this using jQuery.

jquery css dom

Answer 1

Answer №1

Utilize the following jQuery methods:

.nextUntil - to retrieve all the subsequent .box elements.
.andSelf - to include the current element in the collection.
.wrapAll - to enclose each collection within a separate .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

Utilize the following jQuery methods:

.nextUntil - to retrieve all the subsequent .box elements.
.andSelf - to include the current element in the collection.
.wrapAll - to enclose each collection within a separate .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 3

Answer №2

One possible approach is to achieve this by following the example provided in this JSFiddle demo that I quickly put together.

The idea is to iterate through each element with the class .box, store them in an array, and check if the next element also belongs to the .box class:

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

In case the next element does not have the class .box, it creates a parent container, inserts it before the first .box within the collection array, and then moves all the .box elements into this container using appendTo:

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

Answer 4

One possible approach is to achieve this by following the example provided in this JSFiddle demo that I quickly put together.

The idea is to iterate through each element with the class .box, store them in an array, and check if the next element also belongs to the .box class:

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

In case the next element does not have the class .box, it creates a parent container, inserts it before the first .box within the collection array, and then moves all the .box elements into this container using appendTo:

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

Answer 5

Answer №3

Check out the fiddle right over here: http://jsfiddle.net/jdelight/XutA6/5/ I've come up with a cool solution using CSS that allows you to style blocks with a single background color and border. Here's how the HTML would look:

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

Now, let's take a look at the CSS:

            /* This styles all blocks with the necessary background color and border */
        .block {
            background: #eee;
            color: #000;
            border: 1px solid red;
            border-bottom: 0;
            padding: 20px;
            width: 400px;
            border-radius: 20px;
            /* Eliminate rounded corners from bottom left/right */
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
            position: relative;
        }
        /* Style all adjacent blocks while removing the radius - giving the top block a radius and the rest none */
        .block + .block {
            border-radius: 0;
            border-top: 0;
        }

        /* Hidden "cheeky" block with content below all other blocks */
        /* The bottom property ensures it is only visible under the very bottom block (see bottom: -10px) */
        /* Styling for rounded corners on this particular block */
        .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 6

Check out the fiddle right over here: http://jsfiddle.net/jdelight/XutA6/5/ I've come up with a cool solution using CSS that allows you to style blocks with a single background color and border. Here's how the HTML would look:

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

Now, let's take a look at the CSS:

            /* This styles all blocks with the necessary background color and border */
        .block {
            background: #eee;
            color: #000;
            border: 1px solid red;
            border-bottom: 0;
            padding: 20px;
            width: 400px;
            border-radius: 20px;
            /* Eliminate rounded corners from bottom left/right */
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
            position: relative;
        }
        /* Style all adjacent blocks while removing the radius - giving the top block a radius and the rest none */
        .block + .block {
            border-radius: 0;
            border-top: 0;
        }

        /* Hidden "cheeky" block with content below all other blocks */
        /* The bottom property ensures it is only visible under the very bottom block (see bottom: -10px) */
        /* Styling for rounded corners on this particular block */
        .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;
        }

jQuery grouping adjacent elements

Answer №1

Answer №2

Answer №3

Similar questions

The menu positioned beneath the logo is malfunctioning

Can someone assist me with accessing jQuery variables within the agiletoolkit (ATK4) framework?

Tips for securing a navbar in material ui

When clicked on, Bootstrap creates a stylish border of blue lines around the designated

Transform vertical and horizontal scrolling actions into solely horizontal scrolling using HTML and JS

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Boost your Youtube page load speed with Greasemonkey and jQuery techniques

Error: Unable to add dynamic dropdown list to the search field of jqgrid due to undefined variable 'e'

Is there a way to adjust the background hues of a React component when a click event is triggered?

Difficulty adapting CSS using JavaScript

When I click the mouse, my drawing function starts lines from the top left corner instead of the latest point

The speed of jQuery's $.each function is quite lackluster

Implementing icon display upon click in a Meteor application

Why does the slider only slide once, what could be the reason for

Trouble with :active CSS selector not functioning when clicking on child element in IE8

Using jQuery to handle click events and unbinding them

Is there a way for me to choose multiple checkboxes simultaneously?

Concealing an element upon clicking with jQuery

Utilize custom fonts from your local directory within a Vite Vue3 project

What is the best way to display various dialogs based on the specific button that is clicked?