使用jQuery each()动态生成HTML仅显示最后一条XML数据的问题

这个问题我之前也碰到过！核心原因就出在你生成HTML的那行代码上——你用了$('.mainwrap').html(...)，而这个方法的作用是替换目标容器内的所有内容，不是追加新内容。所以每一次循环，你都会把之前生成的div全部覆盖掉，等循环结束时，容器里就只剩最后一次循环生成的div了。

解决方案1：使用.append()追加内容 #

把.html()换成.append()，它会把新生成的元素添加到容器的末尾，不会覆盖已有内容：

$(document).ready(function(){
  $( "sms" ).each(function(index, value){
    let sender, divClass, pClass; // 声明变量，避免全局污染
    if ($(this).attr("type") == 1) {
      sender = "name1";
      divClass = "class1";
      pClass = "pclass1";
    }else if ($(this).attr("type") == 2) {
      sender = "name2";
      divClass = "class2";
      pClass = "pclass2";
    }
    const text = $(this).attr("body");
    const date = $(this).attr("readable_date");
    // 用append替换html，实现追加
    $('.mainwrap').append( $('<div class="'+divClass+'"><p class="senderName">'+sender+'</p><p class="'+pClass+'">'+text+'</p><p class="dates">'+date+'</p> </div>'));
  });
});

解决方案2：先拼接HTML字符串，一次性插入 #

如果数据量比较大，多次调用DOM方法会影响性能，推荐先把所有要生成的HTML拼接成字符串，最后一次性设置到容器中：

$(document).ready(function(){
  let htmlStr = ''; // 初始化空字符串
  $( "sms" ).each(function(index, value){
    let sender, divClass, pClass;
    if ($(this).attr("type") == 1) {
      sender = "name1";
      divClass = "class1";
      pClass = "pclass1";
    }else if ($(this).attr("type") == 2) {
      sender = "name2";
      divClass = "class2";
      pClass = "pclass2";
    }
    const text = $(this).attr("body");
    const date = $(this).attr("readable_date");
    // 拼接HTML字符串
    htmlStr += `<div class="${divClass}"><p class="senderName">${sender}</p><p class="${pClass}">${text}</p><p class="dates">${date}</p> </div>`;
  });
  // 一次性插入到容器
  $('.mainwrap').html(htmlStr);
});

额外提示 #

注意给变量加上let/const声明，避免变成全局变量（你原来的代码里sender、divClass等变量都没声明，会挂载到window对象上，可能引发意外问题）。

内容的提问来源于stack exchange，提问作者Jack T.