Question

当我从jAX代码中提取JSON以使用模板创建元素时，我注意到了我的jQuery代码的这种奇怪行为。我想要做的是，使用JSON，技术上是一个由少数对象组成的数组，我正在构建一系列卡片，向用户显示一些内容。

我已将问题深入到下面的代码中（不使用AJAX），并在此处复制了问题。

$(function() {
  // Mimicking the AJAX Request.
  // The getJSON gets an array of objects.
  // I am limiting it to just string array, and lenght of 3 to keep things simple.
  var response = ["Alice", "Bob", "Charlie"];
  // My Code.
  $.each(response, function(index, value) {
    $tmp = $(".template").clone();
    $tmp.find("strong").text("Name");
    $tmp.find("span").text(value);
    $tmp.appendTo("body");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.template {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 150px;
  line-height: 150px;
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="template">
  <strong>All</strong>
  <span>Names</span>
</div>

问题

如果您在上面的代码段中看到，您会发现元素呈指数增长。即，对于第n个元素，它从一个开始显示卡片n次：

n   card        desc
--- ---------- -----------------------------------
1   1 card      Alice is displayed only once.
2   2 cards     Bob is displayed two times.
3   4 cards     Charlie is displayed four times.

等等......我可以在这里找到一个有趣的系列，类似于2的幂：1, 2, 4, 8, 16...（2 ⁰，2 ¹， 2 ²，2 ³，2 ⁴，...指数2）。

我注意到的另一个奇怪的行为是，当我使用额外的<div>时，这个问题不会发生。例如，考虑相同的代码，但通过将模板嵌套到另一个<div>结构中来包装模板：

$(function() {
  // Mimicking the AJAX Request.
  // The getJSON gets an array of objects.
  // I am limiting it to just string array, and lenght of 3 to keep things simple.
  var response = ["Alice", "Bob", "Charlie"];
  // My Code.
  $.each(response, function(index, value) {
    $tmp = $(".extra .template").clone();
    $tmp.find("strong").text("Name");
    $tmp.find("span").text(value);
    $tmp.appendTo("body");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.template {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 150px;
  line-height: 150px;
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="extra">
  <div class="template">
    <strong>All</strong>
    <span>Names</span>
  </div>
</div>

我不确定究竟是什么导致了这个问题。我在做什么疯狂的错误？ :)

Answer 1

原因是，您没有删除类template，因此每次添加时，您的类template的元素数量都会增加一倍，因此第一种方法是，你做克隆，你需要删除类template。

$tmp = $(".template").clone().removeClass("template");

注意：在下面的预览中，由于样式的原因，我稍微修改了这个类。

＆＃13;

$(function() {
  // Mimicking the AJAX Request.
  // The getJSON gets an array of objects.
  // I am limiting it to just string array, and lenght of 3 to keep things simple.
  var response = ["Alice", "Bob", "Charlie"];
  // My Code.
  $.each(response, function(index, value) {
    // ----------- Change here ---------- //
    $tmp = $(".template").clone().removeClass("template");
    $tmp.find("strong").text("Name");
    $tmp.find("span").text(value);
    $tmp.appendTo("body");
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 150px;
  line-height: 150px;
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="item template">
  <strong>All</strong>
  <span>Names</span>
</div>

＆＃13;

第二次工作的原因是，您已将模板包含在extra div中，并且您将新的.template直接附加到<body>，因此selector .extra .template只选择一个。这仍然是一个错误，因为你生成的每一个<div>都有template类，理想情况下不应该这样。

希望解释清楚。

模板代码创建指数数量的元素

1 个答案: