javascript - Jquery .html 不删除元素内容

Question

大家好。

我的场景是我想在某个选项卡上添加一个新元素ul li，该元素对应于它们自己的id。代码工作正常..但是我发现 .append 比 .html 慢得多...如果我将 .append 更改为 .html，您会在我的代码中看到它只会显示最后一个循环...因为 .html 删除内部现有元素并替换新元素...

我想要的是通过 .html 显示它们的 ID。

对象

groups = [{
    GroupID: 1,
    tabPaneID: "home"
  },

  {
    GroupID: 2,
    tabPaneID: "edit"
  },

  {
    GroupID: 3,
    tabPaneID: "view"
  },

  {
    GroupID: 4,
    tabPaneID: "home"
  },

  {
    GroupID: 5,
    tabPaneID: "home"
  }
];

items = [{
  GroupID: 1,
  Item: "SampleItem1",
  Qty: 21
}, {
  GroupID: 1,
  Item: "SampleItem2",
  Qty: 21
}, {
  GroupID: 2,
  Item: "SampleItem3",
  Qty: 22
}, {
  GroupID: 3,
  Item: "SampleItem4",
  Qty: 23
}, {
  GroupID: 4,
  Item: "SampleItem5",
  Qty: 24
}, {
  GroupID: 4,
  Item: "SampleItem6",
  Qty: 25
}, {
  GroupID: 5,
  Item: "SampleItem7",
  Qty: 25
}];

JQUERY

$.each(settings.tabs, function (i, t) {
  $.each(settings.group, function (ObjID, groupObj) {
    if (t.tabPaneID == groupObj.tabPaneID) {
      $tabPane.find("#" + t.tabPaneID).append("<ul class='delta-ui-common-ul' id=group-" + groupObj.GroupID + "></ul>");

      $.each(settings.item, function (itemID, itemObj) {
        if (groupObj.GroupID == itemObj.GroupID) {
          var list = $tabPane.find("#" + t.tabPaneID);
          list.find("#group-" + groupObj.GroupID).append("<li>" + itemObj.Item + "</li>");

        }
      });
    }
  });
});

Answer 1

因为 html() 替换了你必须自己进行附加操作，例如:

var current_html = list.find("#group-"+groupObj.GroupID).html();
list.find("#group-"+groupObj.GroupID).html(current_html+"<li>"+itemObj.Item+"</li>");

jQuery.append() 的作用不仅仅是向元素添加文本，因此 jQuery.html() 的速度要快得多。