How to create divs containers?

Question

I have code that look like this:

<div class="items">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

I want to add row after 3 col that the final result will be:

<div class="items">
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
   </div>
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
   </div>
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
   </div>
</div>

I must do this using jQuery. The number of col's is not constant. Please help

Just to clarify, you want to use Jquery to add a container div to all of the divs with the class of "col", but in sets of 3's? What have you tried so far? — Dryden Long, Aug 22 '13 at 15:50
Please post the code you have tried. As a jsfiddle would be great. — robooneus, Aug 22 '13 at 15:50
Take a look at: http://stackoverflow.com/questions/11376256/jquery-wrap-every-x-elements-in-div — Alvaro, Aug 22 '13 at 15:50
Sorry could you explain a little more of what you are trying to do? Do you want a function to add (X) amount of `
` at a certain index? — Mark, Aug 22 '13 at 15:50
Also look: http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div — Alvaro, Aug 22 '13 at 15:51
Dryden Long, yes this is what I want, but I have no idea how to start with that. — user2708029, Aug 22 '13 at 15:54
Alvaro Your second link is the answer to my question. Thanks very much! — user2708029, Aug 22 '13 at 15:59

score 2 · Answer 1 · answered Aug 22 '13 at 15:52

Assuming by "the number of col's is not constant", you are referring to the total amount, and not how many columns should be in each row.

The following assumes there should be a maximum of 3 columns in a row:

$(function(){

    $(".col").each(function(i,v){
        var $row;
        if ((i % 3) == 0){
           $row = $("<div/>");
            $row.addClass("row");
            $(".items").append($row);
        }
        else
        {
            $row = $(".items .row:last");   
        }
        $row.append($(this));
    });

});

--- See Live Demo ---

score 0 · Answer 2 · edited Aug 22 '13 at 15:56

0

You should have a look on $('selector').each() at

http://api.jquery.com/each/

With this function you are able to iterate through your items-div.

Pseudo-Code:

$('.items .col').each(function(index) {

  // index is a counter helping you

  // $(this) is the element at the current index

  // the rest is just logical thinking

});

edited Aug 22 '13 at 15:56

Kimtho6

6,154
9
40
56

answered Aug 22 '13 at 15:55

tellob

1,220
3
16
32

How to create divs containers?

2 Answers2