0

我正在使用 JQuery 从多个静态 HTML 文件中创建一个 HTML 页面。主 html 文件有 header.html 和 footer.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，而是使用 get，因为 load 调用将获取的内容添加为 div 上下文的子项。我想要的是完全替换占位符 div 并将其替换为获取的内容。所以，我正在使用 get() 和 replaceWith()。

但是该函数无法替换，因为它没有在“$(this).replaceWith(data);”这一行获得正确的 div 上下文。我希望 $(this) 是我要替换的 div，但这里似乎“this”指向由 JQuery 构造的某个对象以获取内容。

我是 JQuery 的新手，我无法做到这一点。有没有更好的/替代方法来做到这一点？

谢谢..

更新： 按照 Leonard 的建议尝试，这是新代码：

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

但它仅适用于第一级。执行replace?With() 后，当它进入递归时，对loadRecursive 的第二次调用没有得到修改后的'self'。

预期的：

<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>

我错过了什么吗？

编辑：

谢谢伦纳德！它适用于以下更改：

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');
    });
}
4

1 回答 1

1

很简单，只需保存元素：

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-28T12:46:47.970 回答