Jquery dynamically wrap bootstrap columns in rows

Question

I have some code formatted as following:

<div id="section">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>

There can be any number (even or odd) of columns in this section.

What I want is for it to be re-formatted like this:

<div id="section">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
    </div>
</div>

Here is my attempt to do so:

for (var x = 0; x < $('#section').children().length; x+=2) {
    var firstSection = $('#section').children().eq(x);
    if ($('#section').children().length >= x + 1) {
        var secondSection = $('#section').children().eq(x + 1);
        var finalSection = '<div class="row">' + firstSection.parent().html() + secondSection.parent().html() + '</div>';
        secondSection.remove();
    }
    else {
        var finalSection = '<div class="row">' + firstSection.html() + '</div>';
    }

    firstSection.remove();
    $('#section').append(finalSection);
}

If anyone wants some extra fun, you could try allowing this to handle variable column widths as well! (Although I don't need that for my project).

Is it max 2 per row, what is the rational for determining that. — Steve0
– Steve0, Commented Jan 30, 2019 at 16:41
If it exceeds 2 per row then the column will overflow onto a new line. — Evan Hessler
– Evan Hessler, Commented Jan 30, 2019 at 16:51

Steve0 · Accepted Answer · 2019-01-30 18:36:18Z

Hers is an example that loops through the columns, similar to what you are attempting now.

It uses find(), append() and clone() to accomplish this task. As an added feature I wrapped it into a function that accepts the row size as an argument.

//breaks up the section into rows of size 'rowSize', 2 by default.
function breakitup(rowSize = 2) {
  var $section = $("#section"); //get the section
  var $row = $("<div class='row'>"); //make a template for a row
  var cols = $section.find("div"); //get the columns
  var working; //tmp variable for the current row
  
  for (var i = 0; i < cols.length; i++) {
    if (i % rowSize == 0) working = $row.clone(); //clone the template when appropriate
    $(working).append(cols[i]); //add the column to the row
    if ($(working).children().length == rowSize) 
      $section.append(working); //add the row to the section as appropriate
  }
  $section.append(working); //add the last row
}
//call our fancy function
breakitup();

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
  <div class="col-xs-6">test</div>
  <div class="col-xs-6">test2</div>
  <div class="col-xs-6">test3</div>
  <div class="col-xs-6">test4</div>
  <div class="col-xs-6">test5</div>
  <div class="col-xs-6">test6</div>
  <div class="col-xs-6">test7</div>
</div>

gaetanoM · Accepted Answer · 2019-01-30 17:10:59Z

1

You can use .wrapall(), .add() and :even selector:

$('#section > div:even').each(function(idx, ele) {
    $(ele).add($(this).next()).wrapAll($('<div/>', {class: 'row'}));
});


console.log($('#section').html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
    <div class="col-xs-6">1</div>
    <div class="col-xs-6">2</div>
    <div class="col-xs-6">3</div>
    <div class="col-xs-6">4</div>
    <div class="col-xs-6">5</div>
    <div class="col-xs-6">6</div>
    <div class="col-xs-6">7</div>
</div>

edited Jan 30, 2019 at 17:10

answered Jan 30, 2019 at 17:02

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Collectives™ on Stack Overflow

Jquery dynamically wrap bootstrap columns in rows

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related