Question

我正在尝试使用jquery clone（）在我的网页上显示卡片。当页面加载时，它必须根据该特定位置的房间数来克隆卡片div。我硬编码为 roomcount 。我按照https://stackoverflow.com/a/12835644/6915446尝试使用简单的for循环，但每次都会将div的数量加倍。请给我正确的输入。

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

感谢。

当计数为2时，它会克隆显示4个div：

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

当计数为3时，它会克隆显示8个div：

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

Answer 1

我想你可能正在克隆一个数组？

克隆后

$(".col-lg-2")

一旦它成为一个数组，所以当你再次克隆它时你得到4？

尝试使用

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

汤姆

Answer 2

clone()方法复制了所选元素，包括子节点，文本和属性。

您可以将$(".col-lg-2")的值保存在变量中，然后克隆它，这样就可以提高性能，因为您不会多次查询DOM：

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>

Answer 3

当你按照它的类名选择一个元素时，jquery会返回一个包含所有匹配对象的数组。

所以，一旦你克隆了一个具有相同类名的项目，下次你调用$(".col-lg-2");时，它实际上会获取2个项目并克隆它们，下次它将获取4个项目并克隆他们等等。

要避免它（并且作为最佳实践），您应该缓存要克隆的元素：

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

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

这样你总是克隆你缓存的那个对象。

注意：请确保您在克隆对象上没有id，因为您要创建具有相同ID的多个项目，ID应该是唯一的

Jquery：如何根据计数克隆<div>？

3 个答案: