[jQuery] $.map, $.each, detach() , $.getJSOIN()-优快云博客

本文介绍了使用jQuery提升网页元素操作效率的方法，包括利用$.map和$.each进行数组处理，使用.detach()方法移除DOM元素以提高性能。通过具体实例展示了如何更新页面内容并重新插入DOM元素。

$.map function will return the modifies array.

$.each function will not new a new array, the old value will still be the same.

detach() funciton will remove the element from the DOM, you can append those element later, it works more eiffient.

getJSON

$('button').on('click', function() {
  $.getJSON('/cities/deals', function(result){
      $.each(result, function(index, dealItem) {
        var dealElement = $('.deal-' + index);
        dealElement.find('.name').html(dealItem.name);
        dealElement.find('.price').html(dealItem.price);
      });
  });
});

Let's take a minute to make our previous code a bit more efficient. Use the .detach() method to remove the .flight-times list element from the DOM before you insert the new listitems. Then, re-insert the .flight-times element back into the .flights element.

$('.update-available-flights').on('click', function() {
  $.getJSON('/flights/late', function(result) {
    var flightElements = $.map(result, function(flightItem, index){
      var flightEl = $('<li>'+flightItem.flightNumber+'-'+flightItem.time+'</li>');
      return flightEl;
    });
    $('.flight-times').detach().html(flightElements).appendTo('.flights');
  });
});

转载于:https://www.cnblogs.com/Answer1215/p/3928426.html