Question

对于ajax结果处理程序：

$('.update-flight-status').on('click', function() {
  $.getJSON('/status', function(result) {
    var statusElements = $.map(result, function(status, index) {
      var listItem = $('<li></li>');
      $('<h3>'+status.name+'</h3>').appendTo(listItem);
      $('<p>'+status.status+'</p>').appendTo(listItem);
      return listItem;
    });
$('.status-list').html(statusElements); });

AND

$('.update-flight-status').on('click', function() {
  $.getJSON('/status', function(result) {
    var statusElements = $.map(result, function(status, index) {
      var listItem = $('<li></li>');
      $('<h3>'+status.name+'</h3>').appendTo(listItem);
      $('<p>'+status.status+'</p>').appendTo(listItem);
      return listItem;
    });
    $('.status-list').detach()
                  .html(statusElements)
                  .appendTo('.status');
  });
});

为什么第二个例子，＆＃34;分离＆＃34;使用，比第一个更有效吗？

Answer 1

jquery detach与remove相同，只是它通过data或事件处理程序保持对该节点的特定于jquery的分配。当您计划将节点重新连接到DOM中的另一个点时，此方法会派上用场。

在第一个版本中，你真的无法判断status-list是status的孩子，但无论如何，你不是要移除节点，所以像数据，事件处理程序，分配的类等...保持不变。

在第二个版本中，您从DOM中删除status-list，然后修改它，然后重新附加。我假设在同一个地方（但是缺少代码，这只是一个疯狂的猜测）我会说它实际上比第一种情况 SLOWER ，因为第一种情况只是修改了HTML内容而没有费心去做分离/重新连接任何东西。

detach可以提高效率的情况是，如果您删除该节点，并且已经过大量定制，添加了类，数据等...然后重新附加其他地方， 与删除节点，重新创建，重新分配所有内容等等。

Answer 2

分离仅在您特别需要移动元素位置时才有用且有效，或者当一次只能看到一个项目时阻止渲染1000个项目。

您的示例不会使分离看起来高效，看起来该元素从一开始就被错误定位。

为什么jQuery分离会提高效率？

2 个答案: