jquery recursive loading Вложенные html

Я создаю HTML-страницу из нескольких статичных HTML-файлов, используя JQuery. Основной HTML-файл имеет заполнителей для header.html и footer.html, как показано ниже:jquery recursive loading Вложенные html

<!DOCTYPE html> 
<html> 
<head> 

<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
</head> 
<body> 
<div class="place-holder" include-file="bbheader.html"></div> 
</html>

Файл bbheader.html содержит свой собственный заполнитель для загрузки какого-либо дополнительного содержимого HTML во время выполнения.

Содержание bbheader.html

<div class="nav navbar"> 
    <p> Hello I am bbheader. Thanks for loading me!</p> 
    <div class='place-holder' include-file='bbfooter.html'></div> 
</div>

Чтобы загрузить эти файлы, я использую скрипт JQuery, как показано ниже:

$(function() { 
    loadRecursive($(this)); 
}); 

function loadRecursive(context) { 
    //search matching elements that have 'place-holder' class 
    $('.place-holder', context).each(function() { 
     $.get($(this).attr('include-file'), function(data, textStatus) { 
      $(this).replaceWith(data); 
      loadRecursive($(this)); 
     }, 'html'); 
}); 
}

Вместо использования JQuery.load, я использую прибудете потому что вызов load добавляет выбранный контент в качестве дочернего элемента div. То, что я хотел, было полностью заменить держатель места и заменить его набранным контентом. Итак, я использую get() и replaceWith().

Но функция не заменяет, потому что она не получает правильный контекст div в этой строке «$ (this) .replaceWith (data);». Я ожидал, что $ (this) будет div, который я хочу заменить, но, похоже, здесь «это» указывает на какой-то объект, построенный JQuery для извлечения содержимого.

Я новичок в JQuery, и я не могу получить это право. Есть ли лучший/альтернативный способ сделать это?

спасибо ..

Обновления: Пробовал как предложил Леонард, и это новый код:

function loadRecursive(context) { 
    //search matching elements that have 'place-holder' class 
    $('.place-holder', context).each(function() { 
     var that = this; 
     $.get($(this).attr('include-file'), function(data, textStatus) { 
      $(that).replaceWith(data); 
      loadRecursive(that); 
     }, 'html'); 
    }); 
}

Но это работает только для 1-го уровня. После выполнения замены? С(), когда он переходит к рекурсии, второй вызов loadRecursive не получает измененное «я».

Ожидаемое:

<div class="nav navbar"> 
<p> Hello I am bbheader. Thanks for loading me!</p> 
<div class='place-holder' include-file='bbfooter.html'></div> 
</div>

Но она до сих пор

(<div class="place-holder" include-file="bbheader.html"></div>

ли я что-то отсутствует?

EDIT:

Thanks Leonard! Он работает со следующими изменениями:

function loadRecursive(context) { 
    //search matching elements that have 'place-holder' class 
    $('.place-holder', context).each(function() { 
     var that = $(this); 
     $.get(that.attr('include-file'), function(data, textStatus) { 
      repl = $(data); 
      that.replaceWith(repl); 
      loadRecursive(repl); 
     }, 'html'); 
    }); 
}

источник

2013-07-28 Mupparthy Ravindranath

Ответ вывешенные! Дайте мне знать, если это сработало :) –

Спасибо, Леонард! Он работает со следующим изменением: Функция loadRecursive (контекст) { \t // поиск соответствующих элементов, имеющих класс «place-holder» \t $ ('. Place-holder', context).каждая (функция() { \t \t вар, что = $ (это); \t \t $ .get (that.attr ('include-файл'), функция (данные, textStatus) { \t \t \t РЕПЛ = $ (данных); \t \t \t that.replaceWith (REPL); \t \t \t loadRecursive (REPL); \t \t}, 'HTML'); \t}); } –

Рад слышать! Но на самом деле, я думаю, вы должны использовать тот, который я написал последним, потому что я думаю, что ваш будет ломаться, если данные имеют несколько узлов на том же первом уровне. Prof: http://jsbin.com/oluqiv/3/edit –

Простой, просто сохранить элемент:

function loadRecursive(context) { 
    //search matching elements that have 'place-holder' class 
    $('.place-holder', context).each(function() { 
     var self = $(this); 
     $.get(self.attr('include-file'), function(data, textStatus) { 
      self.html(data); // Load the data into the placeholder 
      loadRecursive(self); // Fix sub placeholders 
      self.replaceWith(self.get(0).childNodes); // Unwrap the content 
     }, 'html'); 
    }); 
}

Не ожидать this быть одинаковыми в разных/укрытый функций :)

источник

2013-07-28 12:46:47

Изменено. Но после вызова replaceWith() «я» остается старым «я». $ .get преуспевает и получает новые данные (проверяется с помощью firebug), но replaceWith не заменяет? –

is replaceWith() синхронный метод, или мне нужно ждать другого обратного вызова, чтобы увидеть измененное содержимое? –

Как запоздалая мысль, - Можно ли использовать replaceWith() в рекурсивном вызове? Может ли b, что это не позволяет заменить, так как исходный объект div все еще является частью стека вызовов функций? –

ответ

Смежные вопросы