JQuery: вставьте HTML в соответствующие селекторы, используя пользовательские .load () - PullRequest
Новая
       3

JQuery: вставьте HTML в соответствующие селекторы, используя пользовательские .load ()

1 голос
/ 30 декабря 2010

Чтобы продемонстрировать, что я после, рассмотрим следующий jsfiddle:

http://jsfiddle.net/5TNVK/4/

За исключением того, что я хочу, чтобы он вставлял HTML только в соответствующий селектор, а не в каждый селектор.Я пытаюсь сделать так, чтобы каждый селектор совпадал с самим собой.При каждом ajax-запросе я получаю около 5 элементов со страницы, которую я загружаю, и затем анимацию и тому подобное с ними.В настоящее время я сначала делаю вызов ajax, затем перебираю массив селекторов, присваивая каждому html () результаты find ().Это очень быстро во всех браузерах, отличных от IE, но занимает около 1000 мс или более в IE8 при поиске только 5 элементов.

Я полагаю, что есть более простой способ ajax GET страницы один раз , .find () каждый селектор отправляет на него, а затем вставляет результаты в тот же селектор.Кроме того, он должен вызывать только один раз .

Кажется, я не могу понять, как на самом деле перебирать каждый self.Я также хотел бы, чтобы я просто вставил URL без конечных селекторов.Функция уже знает, какие селекторы использовать в .find(), потому что это будет то же самое, что было передано ей.

В идеале это будет так:

$('#foo, .bar, #test[href=moo]').my_load('newpage.html');

Где элемент текущей страницы с id = foo вставляется с элементом newpage.html с id = foo, и то же самое для class = bar и т. Д.

Редактировать:

ПослеЕще несколько сравнительных тестов и так далее. Похоже, именно метод .find () заставляет IE8 быть настолько медленным в 1.4.4.Нахождение 5 элементов по одному в 3k html требует 1000 мс в 1.4.4, в 1.3.2 - около 600 мс.

Редактировать 2:

Сохранение прежнего состояния, в котором я находилсяполучить исходный код HTML заранее, я использую эту функцию для анализа исходного кода html и получения селекторов.Это работает около 200 мс в IE.Так что это улучшение, но мне сказали остерегаться innerHTML. 

jQuery.fn.extend({
    super_load: function(html,callback ) {
        var self = this;

        var htmls = $(html).find(self.selector);

        for (var i =0; i < self.length; i++){
            self[i].innerHTML = htmls[i].innerHTML;
        }

        if ( callback ) {
            callback.call(this,html);
        }

        return this;
    }
});

1 Ответ

0 голосов
/ 30 декабря 2010

Не думаю, что вам нужно писать свой собственный загрузчик. Попробуйте это ( демо ): 

$(document).ready(function() {
    var hdr = $('<div />').load('http://fiddle.jshell.net #header', function(){
        $('#name').html( hdr.find('#name').html() );
        $('.aiButton[id=login]').html( hdr.find('#login').html() );
    });
});
...