Question

我正在尝试从XML数据动态填充HTML。我只需要某些价值观。我设法用each（）做到了;当我控制日志时，一切都输出完美，但当我尝试为每个对象生成HTML代码时，我只获得最后一个数据（仅生成1个div）。

以下是示例代码：

XML：

<sms protocol="0" address="+00000000000" date="1514988026768" type="2" subject="null" body="Some text...1" toa="null" sc_toa="null" service_center="null" read="1" status="-1" locked="0" date_sent="0" readable_date="3 Jan 2018 15:00:26" contact_name="Name1" />
<sms protocol="0" address="+00000000000" date="1514988062956" type="1" subject="null" body="Some text...2" toa="null" sc_toa="null" service_center="+00000000" read="1" status="-1" locked="0" date_sent="1514988062000" readable_date="3 Jan 2018 15:01:02" contact_name="Name1" />
<sms protocol="0" address="+00000000000" date="1515074431967" type="1" subject="null" body="Some text...3" toa="null" sc_toa="null" service_center="+000000000" read="1" status="-1" locked="0" date_sent="1515074430000" readable_date="4 Jan 2018 15:00:31" contact_name="Name1" />

jQuery的：

$(document).ready(function(){
$( "sms" ).each(function(index, value){
if ($(this).attr("type") == 1) {
    sender = "name1";
    divClass = "class1";
    pClass = "pclass1";
}else if ($(this).attr("type") == 2) {
    sender = "name2";
    divClass = "class2";
    pClass = "pclass2";
}
text = $(this).attr("body");
date = $(this).attr("readable_date");

$('.mainwrap').html(
$('<div class="'+divClass+'"><p class="senderName">'+sender+'</p><p class="'+pClass+'">'+text+'</p><p class="dates">'+date+'</p>    </div>'));
   });
 });

使用此代码，我只得到1 div生成“Some text ... 3”（来自XML）。控制台日志正确输出所有3个值。

从其他来源的阅读中我猜我搞砸了HTML生成部分，因为它只会生成上一次迭代的数据，但我对此很新，并且无法弄清楚我做错了什么。

感谢任何帮助。

Answer 1

我现在暂时没有使用jQuery，但似乎你每次都在替换包装器中的HTML，而不是附加新的div

Answer 2

正如@Giacomo Cosimato所说，您每次都使用.html() 更改元素的内容来删除内容，而您需要使用.append() 将内容添加到元素：

$(document).ready(function() {
  $("sms").each(function(index, value) {
    if ($(this).attr("type") == 1) {
      sender = "name1";
      divClass = "class1";
      pClass = "pclass1";
    } else if ($(this).attr("type") == 2) {
      sender = "name2";
      divClass = "class2";
      pClass = "pclass2";
    }
    text = $(this).attr("body");
    date = $(this).attr("readable_date");

    $('.mainwrap').append(
      $('<div class="' + divClass + '"><p class="senderName">' + sender + '</p><p class="' + pClass + '">' + text + '</p><p class="dates">' + date + '</p>    </div>'));
  });
});

.mainwrap {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<sms protocol="0" address="+00000000000" date="1514988026768" type="2" subject="null" body="Some text...1" toa="null" sc_toa="null" service_center="null" read="1" status="-1" locked="0" date_sent="0" readable_date="3 Jan 2018 15:00:26" contact_name="Name1"
/>
<sms protocol="0" address="+00000000000" date="1514988062956" type="1" subject="null" body="Some text...2" toa="null" sc_toa="null" service_center="+00000000" read="1" status="-1" locked="0" date_sent="1514988062000" readable_date="3 Jan 2018 15:01:02"
  contact_name="Name1" />
<sms protocol="0" address="+00000000000" date="1515074431967" type="1" subject="null" body="Some text...3" toa="null" sc_toa="null" service_center="+000000000" read="1" status="-1" locked="0" date_sent="1515074430000" readable_date="4 Jan 2018 15:00:31"
  contact_name="Name1" />
  
  <div class="mainwrap"></div>

jQuery each（）;生成html元素仅返回最后一个值

2 个答案: