CODEWITHSUNDEEP
javascriptjquery
user715564
user715564

Reputation: 1690

Wrap every two divs in a div in each parent div

Here is my html:

<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>
<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>
<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>

The number of child divs can change in each parent. Some might have an even number of child divs and some might have an odd number.

I need to wrap every two child divs with a div named "grid". If there is an odd number of child divs, I need to wrap the last child div in a div named "grid". For example:

<div class="parent">
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
    </div>
</div>

Here is my jQuery:

    var divs = $(".parent > .col-1-2");
    for(var i = 0; i < divs.length; i+=2) {
        divs.slice(i, i+2).wrapAll("<div class='grid'></div>");
    }

This works in that it wraps every two child divs but it's not contained to each parent div. If a parent div has five child divs, the first child div from the next parent will be pulled into the previous parent.

Upvotes: 0

Views: 825

Answers (1)

laiju
laiju

Reputation: 1373

Try this

  $(".parent").each(function(){
    var divs =  $(this).find('.col-1-2');
    for(var i = 0; i < divs.length; i+=2) {

    divs.slice(i, i+2).wrapAll("<div class='grid'></div>");

    }
  });

Upvotes: 4

Related Questions