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加载不加元素

回答

相关问题