jquery遞歸加載嵌套html

我正在創建一個HTML頁面使用JQuery多重靜態HTML文件。主HTML文件中有佔位了header.html和footer.html，如下：jquery遞歸加載嵌套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因爲，加載調用會將提取的內容作爲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」。

預計：

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

來源

2013-07-28 Mupparthy Ravindranath

答案貼！讓我知道它是否工作:) –

謝謝倫納德！它適用於以下變化： 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}）; } –

很高興聽到！但實際上，我認爲你應該使用我最後寫的那個，因爲我認爲如果數據在同一個第一級有多個節點，你的將會中斷。教授：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成功並獲取新數據（使用螢火蟲進行檢查），但replaceWith不會取代？ –

是replaceWith（）一個同步方法，還是必須等待另一個回調才能看到更改的內容？ –

作爲事後回想， - 在遞歸調用中使用replaceWith（）是否安全？難道它不允許替換，因爲原始的div對象仍然是函數調用堆棧的一部分？ –

jquery遞歸加載嵌套html

回答

相關問題