javascript - 使用 jQuery 更新/覆盖 HTML 数据？

Question

我正在尝试循环访问响应数据并将它们的值插入到我网页的 HTML 中，HTML 可能已经包含一些值，因此我想清除它们并仅插入新值，以便它是最新的。

我的 HTML 代码如下所示；

<div id="ind">
  {% for inf in prospect.prospect_industries.all %}
    {% if inf.is_interested %}
      <div>
        <span id="industryInterest" data-fit="id_industry{{inf.id}}"></span>

        <p>{{inf.get_industry_display}}</p>
      </div>
    {% endif %}
  {% endfor %}
</div>

我的 JS 看起来像这样:

 for (i = 0; i < response.length; i++) { 
   //alert(response[i].industry + ":" + response[i].is_interested);

   if (response[i].is_interested) {

     $("#industryInterest").html(response[i].industry);
     $("#industryInterest").attr("data-fit", response[i].industry);
   }
 }

我尝试做这样的事情

$('#ind').html('');

但是，这会删除 #ind div 中的 HTML，因此我无法插入新值。在这种情况下更新 HTML 的正确方法是什么？我是否首先清除 #ind div 的 HTML，然后从 jQuery 重新创建它？

编辑:

我设法使用以下代码使其工作:

$('#industryInterest').html("");

  for (i = 0; i < response.length; i++) {
    if (response[i].is_interested) {
      $("#industryInterest").append("<p>" + response[i].industry + "</p>");
    }
  }

Answer 1

因此，正如我们所知 - 不允许对多个元素使用相同的 id。当然，你可以添加相同的id，但是你的代码

$("#industryInterest")

将仅选择第一个。

这就是为什么你需要使用其他东西。使用类industryInterest:

<span class="industryInterest" ....

接下来，您不想更新所有 span，而是更新 is_interested 的内容。要获取具有特定索引的元素，请使用 eq

所以，你的代码变成:

for (i = 0; i < response.length; i++) { 
   //alert(response[i].industry + ":" + response[i].is_interested);

   if (response[i].is_interested) {
     // we use class here and we're getting 
     // element with the same index as i
     // and you can chain jquery functions too!
     $(".industryInterest").eq(i)
         .html(response[i].industry)
         .attr("data-fit", response[i].industry);
   }
}