CODEWITHSUNDEEP
javascriptjqueryhtml
Shruthi
Shruthi

Reputation: 65

Jquery: How to clone <div> based on the count?

I am trying to use jquery clone() for displaying cards on my web page. When the page loads it has to clone card div based on the count of rooms in that particular location. I hardcoded count as roomcount. I tried using simple for loop as per https://stackoverflow.com/a/12835644/6915446, However it doubles the count of divs each time. Please provide me right inputs. 

<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-2">
    <div class="card">
        <h6 class="card-header">NC001
            <ul class="card-header-pills pull-xs-right">
                <span class="badge badge-primary" aria-hidden="true">2</span>
                <!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
            </ul>
        </h6>
        <div class="card-block" id="scrollCard">
          <h4 class="card-title"></h4>
             <!-- <p class="card-text">ICU : 12.00 AM</p>
              <p class="card-text">VEN : 1.00 AM</p> -->
        </div>
    </div>
    <script>
    var roomcount = 3;
       $(document).ready(function() {
        for(var i=0; i< roomcount; i++) {
          $(".col-lg-2").clone().appendTo(".row-fluid");
      }

      });
    </script>
</div>

Thanks.

When the count is 2, it clones to display 4 divs:

When the count is 2, it clones to display 4 divs

When the count is 3, it clones to displays 8 divs:

When the count is 3, it clones to displays 8 divs

Upvotes: 1

Views: 1867

Answers (3)

Tomer
Tomer

Reputation: 17930

When you select an element by it's class name, jquery returns an array of all the matching objects.

So once you've cloned an item with the same class name, the next time you call $(".col-lg-2"); it will actually fetch 2 items and clone them, and the next time it will fetch 4 items and clone them etc.

To avoid it (and as a best practice) you should cache the element you are cloning:

var roomcount = 3,
    $cloned = $('.col-lg-2');

for(var i = 0; i < roomcount; i++) {
   $cloned.clone().appendTo('.row-fluid');
}

that way you always clone just that one object you cached.

NOTE: make sure you don't have an id on the cloned object since you'll be creating multiple items with the same id and id should be unique

Upvotes: 1

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

The clone() method makes a copy of selected elements, including child nodes, text and attributes.

You can save the value of $(".col-lg-2") in a variable, and clone it, these way you are improving performance as you are not going to query the DOM multiple times:

var roomcount = 3,
    $colLg2 = $('.col-lg-2');

for(var i = 0; i < roomcount; i++) {
  $colLg2.clone().appendTo('.row-fluid');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
  <div class="col-lg-2">
    <div class="card">
      <h6 class="card-header">NC001
        <ul class="card-header-pills pull-xs-right">
          <span class="badge badge-primary" aria-hidden="true">2</span>
          <!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
        </ul>
      </h6>
      <div class="card-block" id="scrollCard">
        <h4 class="card-title"></h4>
        <!-- <p class="card-text">ICU : 12.00 AM</p>
<p class="card-text">VEN : 1.00 AM</p> -->
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Thomas Ward
Thomas Ward

Reputation: 61

I think you might be cloning an array?

After you have cloned

$(".col-lg-2")

once it becomes an array, so when you clone it again you get 4?

Try using 

$(".col-lg-2:first").

Tom

Upvotes: 3

Related Questions