Jquery: How to clone
based on the count?

Question

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

you can't just go willy nilly cloning this and that.. your cards have an id, cloning them would mean having duplicate ids which is illegal — I wrestled a bear once., Oct 10 '16 at 13:36

score 3 · Answer 1 · answered Oct 10 '16 at 13:37

3

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

answered Oct 10 '16 at 13:37

Thomas Ward

61
3

score 1 · Accepted Answer · answered Oct 10 '16 at 13:48

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

score 0 · Answer 3 · answered Oct 10 '16 at 13:40

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>

Jquery: How to clone based on the count?

3 Answers3

Jquery: How to clone
based on the count?