jQuery加載不加元素

我使用jQuery的加載函數從外部html文件中獲取模板數據。在大多數情況下，我更喜歡將數據存儲在變量中，並在稍後需要時添加它。例如，我最終可能會多次克隆節點，或將其他數據附加到它等等。關鍵是我需要能夠從外部文件加載元素，但不能將其附加到現有文檔。jQuery加載不加元素

我現在正在做的很簡單：

var storage = document.createElement('div'); 
$(storage).load('somehtmlfile.html #sampleTemplateDiv');

但其惱人必須從每一次的存儲格內取出的HTML。如果我可以做一些類似的事情，而不必附加到冗餘容器div，我可以從存儲變量中很好地等待html文件中的數據，這將是很好的。這可能嗎？

非jQuery解決方案將是完全可以接受的。你可以這樣做

來源

2012-07-23 ryandlf

可能重複http://stackoverflow.com/questions/4260400/ jquery-load-into-variable-or-hidden-element） – j08691 2012-07-23 03:30:08

重複問題中的答案似乎不夠用。它建議在get調用中使用data.find函數，但在我的嘗試中，data.find函數似乎不可用。 – ryandlf 2012-07-23 03:42:55

請在投票之前閱讀我的評論以關閉重複。 – ryandlf 2012-07-23 04:52:19

我的解決方案是使用.ajax而不是.load並將數據臨時存儲在存儲div中，然後解壓縮並返回元素。我在一個外部函數中也使用了這個，所以將它作爲一個同步調用是合適的......不幸的是，我不能正確地返回該元素。

var ret = null; 
$.ajax({ 
    url: url, 
    async: false, 
    success: function(data) { 
     var storage = document.createElement('div'); 
     storage.innerHTML = data; 
     var template = $(storage).find('#' + id); 
     if(template.length > 0) ret = template[0]; 
    } 
}); 
return ret;

來源

2012-07-23 04:19:01 ryandlf

的一種方法是通過加載它包含的數據，像這樣一個JSON對象：
（你也可以在URL指向服務器的腳本文件讀取URL參數和輸出JSON對象）

例子：

//JQUERY: 
$.ajax({ 
    method: "GET", 
    dataType: "json", 
    url: "path/to/template.json", 
    success: function(data) { 
    var storage = data.template.html; 
    // do something here 
    } 
}); 

//JSON FILE: 
{ 
    "template": 
    { 
    "html":"<div ...></div>", 
    "some_var":"some_value" 
    } 
}

另一種方式，你可以只加載與參數的HTML文件...例如：將網址更改爲：url: "path/to/my_template.html?id=some_div"或使用參數在URL中使用負載（）它。

然後在每個模板文件中插入一個腳本來讀取變量並用請求的元素重寫文檔。

代碼：

//query.js 
function getQueryString() { 
    var q = {} 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0; i<vars.length; i++) { 
    var pair = vars[i].split("="); 
    q[pair[0]]=pair[1]; 
    } 
    return q; 
} 
    $(document).ready(function() { 
    var $q = getQueryString(); 
    if ($q.id) { 
     document.write($($q.id).html()); 
    } 
    }); 

//template html files 
//head section 
<script type="text/javascript" src="query.js"></script>

我還沒有測試這一點，但我認爲它應該工作...

你需要把這個腳本在每個模板文件。

來源

2012-07-23 03:30:13 Ozzy

有沒有辦法做同樣的事情，而是加載一個HTML文件，並通過ID選擇元素像.load呢？ – ryandlf 2012-07-23 03:40:01

您是否擁有對HTML文件的控制權？ @ryandlf – Ozzy 2012-07-23 03:48:57

是的。我只是將模板數據存儲在單獨的html文件中，所以它不會混亂dom和我的顯示html。 – ryandlf 2012-07-23 03:51:41

你可以將它加載到一個jQuery對象，而不是附加到DOM？例如

var data = $('<div id="loaded-content" />').load(url);

，當你想使用它以後：

$('#my-container').html(data.html());

[JQuery的.load（）爲變量或隱藏的元素（的

來源

2015-10-21 11:08:32

jQuery加載不加元素

回答

相關問題