CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Evan Hessler
Evan Hessler

Reputation: 337

Jquery dynamically wrap bootstrap columns in rows

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

Upvotes: 1

Views: 1258

Answers (2)

Steve0
Steve0

Reputation: 2253

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>

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Related Questions