jquery 嵌套html页面,jquery递归加载嵌套html
我正在创建一个HTML页面使用JQuery多重静态HTML文件。主HTML文件中有占位了header.html和footer.html，如下：jquery递归加载嵌套html
Bootstrap 101 Template文件bbheader.html包含它自己的占位符加载在运行时的任何其他HTML内容。 bbheader.html的
内容
要加载这些文件，我使用如下一个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，我使用get因为，加载调用会将提取的内容作为div上下文的子项添加。我想要的是完全取代占位符div，并将其替换为取得的内容。所以，我使用get()和replaceWith()。
但是该函数无法替换，因为它没有在这一行获得正确的div上下文“$(this).replaceWith(data);”。我期望$(this)是我想要替换的div，但是在这里'this'指向由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级。在执行replace之后？使用()，当它进行递归时，对loadRecursive的第二次调用不会获得修改后的“self”。
预计：
但它仍然有
(
我缺少的东西？
编辑：
谢谢伦纳德！它的工作原理有以下变化：
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');
});
}
+0
答案贴！让我知道它是否工作:) –
+0
谢谢伦纳德！它适用于以下变化： function loadRecursive(context){ \t //搜索具有'占位符'类的匹配元素 \t $('。place-holder'，context)。每个(函数(){ \t \t VAR那= $(本); \t \t $获得(that.attr( '包括文件')，功能(数据，textStatus){ \t \t \t REPL = $(数据); \t \t \t that.replaceWith(REPL); \t \t \t loadRecursive(REPL); \t \t}， 'HTML'); \t}); } –
+0
很高兴听到！但实际上，我认为你应该使用我最后写的那个，因为我认为如果数据在同一个第一级有多个节点，你的将会中断。教授：http://jsbin.com/oluqiv/3/edit –