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

Question

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

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

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

Я считаю, что есть более простой способ, который будет ajax ПОЛУЧИТЬ страницу один раз, .find() каждый селектор отправляет на него, а затем вставляет результаты в тот же селектор. Также он должен только обратный вызов один раз.

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

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

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

Где элемент текущей страницы с идентификатором = Foo получает инъекцию элемента newpage.html с идентификатором = Foo, и то же самое для класса = бар, и т.д.

Edit:

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

Edit 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; 
    } 
}); 

Answer 1

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

$(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()); 
    }); 
});