IE8 не отображает данные JSON, используя JQUERY в списке

Question

Я занимаюсь разработкой инструмента асинхронного поиска в базе данных.В настоящее время он работает с Firefox и Chrome, но имеет один огромный сбой с Internet Explorer (версия 8).

Учащиеся могут ввести свои предполагаемые оценки MCAT и GPA, а затем JQuery сортирует школы, где они находятся в топ-25% или середина 50%.По сути, это мечта (или кошмар) студента-невролога.

Jquery циклически просматривает данные JSON, отображая каждый элемент, который соответствует критериям, в элементе <li>.Опять же, он отлично работает в ff и chrome, но в Internet Explorer отказывается отображать элементы списка.Тем не менее, он отображает правильное количество элементов, что означает, что данные json проходят правильно.

После поиска в stackoverflow я увидел несколько комментариев (красочных, часто!) О том, как IE отказывается разрешать размещениеэлементы в таблицах и некоторые другие элементы innerhtml, использующие jquery.

Мне интересно, в этом ли проблема, и хотя я нашел похожую проблему в этом вопросе Я не могу понятькак адаптировать его для моего проекта (я новичок в javascript).

Любая помощь будет замечательной.Код можно найти ниже.

-самуил

$.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.ИМО, как у меня ниже, тоже более читабельно.Обратите внимание, что я не проверял это, но вы должны понять:

$.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).

Удачи, надеюсь, это работает для вас!