Question

在我进行AJAX调用之后，我需要遍历结果，克隆模板（它是我用作元素的模板的div），使用类选择器设置其标签然后将新元素附加到DOM。现在我在循环之后将它们全部附加在一起以避免回流。

需要指出的一件重要事情是，当我迭代从AJAX调用中收到的数据时，我附加元素的div是隐藏的并且是空的。

渲染1,500个元素需要大约3秒钟，而且它只是文本。

这是我的代码（不包括AJAX调用，只是成功的一部分）：

var resultsControl = $("#divFollowUpResults");
var template = $("#FollowUpTemplate");
var itemControls = [];

$.each(data, function (i, value) {
  var itemControl = template.clone();
  itemControl.removeAttr("id").show();
  $(".FollowUpDateCreated", itemControl).text(value.DateCreated);
  $(".FollowUpUser", itemControl).text(value.User);
  $(".FollowUpDateOfferId", itemControl).text(value.OfferId);
  $(".lnkOfferId", itemControl).attr("href", $(".lnkOfferId", itemControl).attr("href") + "/" + value.OfferId);
  $(".FollowUpCar", itemControl).html(value.OfferVehicle);
  $(".FollowUpOfferAmountAndType", itemControl).text(value.OfferAmountAndType);
  $(".FollowUpOfferStatus", itemControl).text(value.OfferStatus);
  $(".FollowUpOfferStatusDate", itemControl).text(value.OfferStatusDate);
  $(".FollowUpOfferPostState", itemControl).text(value.OfferPostState);
  $(".FollowUpOfferVIN", itemControl).text(value.OfferVIN);
  $(".FollowUpType", itemControl).text(value.Type);
  $(".FollowUpReason", itemControl).text(value.Reason);
  $(".FollowUpStatus", itemControl).text(value.StatusName);
  $(".FollowUpDate", itemControl).text(value.Date);
  $(".FollowUpPM", itemControl).text(value.Owner);
  $(".OfferSellerName", itemControl).text(value.OfferSellerName);
  $(".OfferSellerAddress", itemControl).text(value.OfferSellerAddress);
  itemControl.attr("data-follow-up-item-id", value.Id);
  itemControl.attr("data-follow-up-item-date", value.DateYYYYMMDDHHmm);
  itemControl.attr("data-follow-up-item-owner", value.Owner);
  itemControl.attr("data-follow-up-item-status", value.StatusName);
  itemControl.attr("data-follow-up-item-status-id", value.StatusId);
  itemControls.push(itemControl);
});

resultsControl.append(itemControls);
resultsControl.show();
$("#divFollowUpSearching").hide();

在循环中追加多个元素时的jQuery性能

0 个答案: