Question

我发布了a question yesterday处理解析json数据的问题。在其中一个后续回答中，有人说我在每个迭代中使用jQuery append（）函数，同时使用每个（）。

我在做：

$.getJSON("http://myurl.com/json?callback=?", 
  function(data) {        

  // loop through each post 
  $.each(data.posts, function(i,posts){ 

    ... parsing ...

    // append
    $('ul').append('<li>...</li>');

  }); 

 });

我将其修改为：

$.getJSON("http://myurl.com/json?callback=?", 
  function(data) { 

     // create array
     arrPosts = new Array(); 

      // loop through each post
      $.each(data.posts, function(i,posts){ 

       ... parsing ...

        arrPosts[i] = '<li> ... </li>'; 

      });           

      // output
      for (i=0;i<arrPosts.length;i++){ 
        $('ul').append(arrPosts[i]); 
      } 

  });

这似乎工作正常，示例演示：http://jsbin.com/isuro

但我这样做对吗？我有点像菜鸟，只是想确保我正确接近这个。谢谢你的建议！

Answer 1

你仍然做错了。关键是你不想在循环中修改DOM，因为它太慢了。您正在向数组添加项目，因此您可以在一个函数调用中添加所有项目：

$('ul').append(arrPosts.join(''));

Answer 2

在大多数浏览器中，附加一个大的HTML字符串比执行多个小附加更快。因此

 $('ul').append( arrPosts.join( "\n" ) );

应该产生比

更好的结果

  for (i=0;i<arrPosts.length;i++){ 
    $('ul').append(arrPosts[i]); 
  }

（显然，只有在添加大量元素时，这种差异才有意义）

Answer 3

你不应该迭代输出。

$('ul').append( arrPosts.join( "\n" ) );

否则看起来很好

在每次迭代中附加到dom或创建数组和输出？

3 个答案: