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的新手）。 / p>

任何帮助都会很精彩。代码可以在下面找到。

-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 {{1} } 方法）。

祝你好运，希望这适合你！

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

1 个答案: