在列表中使用JQUERY不显示JSON数据的IE8

Question

我正在开发异步数据库搜索工具。它目前与firefox和chrome一起使用，但与Internet Explorer（版本8）有一个巨大的呃逆。

学生可以输入他们的潜在MCAT和GPA分数，然后jquery将他们放置在前25％或中50％的学校分类。基本上，这是一个神经过敏的学生的梦想（或噩梦）。

jquery循环遍历JSON数据，显示与<li>条目中的条件匹配的每个项目。再一次，它在ff和chrome中运行良好，但在Internet Explorer中它拒绝显示列表项。但是，它会显示正确的项目数，这意味着json数据正常运行。

在通过stackoverflow搜索后，我看到了一些关于IE如何拒绝将表元素和其他一些使用jquery的innerhtml元素放入元素的解释（多彩，经常！）。

我想知道这是否是问题，虽然我发现this question类似的问题，我不能完全弄清楚如何适应我的项目（我是新来的JavaScript）。

任何帮助将是美好的。代码可以在下面找到。

-samuel

$.getJSON("schoolgrabber.php?jsoncallback=?", function(data){ 
     //loop through the items in the array 
     for(var x=0; x < data.length; x++){ 
      if(MCAT >= data[x].TopPercentileMCAT && data[x].TopPercentileMCAT!=''){ 

      var li = $("<li>").appendTo("#schoollist"); 
      var school= data[x].School; 
      //add the actual information into the li using a chain event 
      //the event begins by appending an <a> tag, with the name of the school inside (text(data[x].School) 
      //then it adds a unique id, which is the iteration number the counter is on above (x) 
      //then it adds the url, and adds the school variable, which allows the schools to be clicked over to the results page 
      //then it puts all of that inside li, as declared above (slightly backwards, but hey) 
      $("<a>").text(data[x].School).attr("id",x).attr("href", "results.php?school=" + school).appendTo(li); 
      $("#schoollist li").addClass("school"); 
      var quantity = $(".school").length; 
      $('#schoolquantity').empty(); 
      $('#schoolquantity').append(quantity); 
      }} 
      }); 

Answer 1

而是使用jQuery和链接来建立你的DOM，会转而打造出你想要呈现的HTML的字符串，并添加完成字符串只是一个时间的。

它不仅可以修复您的错误，还可以获得更好的性能。我正在做的是建立清单的完整HTML并计算数量。然后，当我完成构建HTML时，我将它添加到DOM。 IMO下面的方式也更具可读性。请注意，我没有测试过这一点，但你应该得到的想法：

$.getJSON("schoolgrabber.php?jsoncallback=?", function(data){ 
     //loop through the items in the array 

     var html = []; 
     var parentElement = $("#schoollist"); 
     var quantity = 0; 

     for(var x=0; x < data.length; x++){ 
      if(MCAT >= data[x].TopPercentileMCAT && data[x].TopPercentileMCAT!=''){ 
       var school= data[x].School;     
       html.push("<li class=\"school\">"); 
       html.push(" <a id=\"" + x + "\" href=\"results.php?school=" + school "\">"); 
       html.push(   data[x].School); 
       html.push(" </a>"); 
       html.push("</li>"); 

       quantity++; 
      } 
     } 

     parentElement.html(html.join("")); 
     $('#schoolquantity').html(quantity); 
}); 

请记住，每次你改变DOM的浏览器必须做一堆东西更新网页。这是昂贵的。你想尽可能避免从DOM中添加/抓取，而是“批量”更改（作为一个附注，如果你想改变DOM而不用“批处理”，请看jquery detach方法）。

祝你好运，希望这对你有用！