我正在尝试将html文件加载到其他html文件中。
例如:
$(function() {
$('#main li').on('click', function() {
var loadstring = $(this).data('url') + ' ' + $(this).data('target');
$('#container').load( loadstring );
});
});
<div id="main">
<ul>
<li data-url="home.html" data-target="#foo">Home</li>
<li data-url="some.html" data-target="#bar">Some</li>
</ul>
</div>
<div id="container"> </div>
在我的some.html
中,<p>
元素包含数据且标识为bar
。
在我的home.html中,没有元素的ID为foo
。
我想要实现的目标是:
我想检查加载的文件是否包含具有特定ID的元素。 或类,取决于传递的数据。 如果是,则loadsting应如下所示:
home.html #foo
如果没有,加载应该看起来像
home.html
所以整个页面都被加载了。
有没有办法可以使用load()并检查现有元素?
我试过像这样的
var loadstring = $(this).data('url') + ' ' + $(this).data('target');
var e = $('#container').load( loadstring );
alert(e.prop('childElementCount'));
但这导致了0,并且在第二次尝试时它说它找到了一个元素,因为它实际上是在查看我的容器而不是在加载文件中:D
答案 0 :(得分:0)
您最好从jquery获取源代码并使用ajax(基于https://github.com/jquery/jquery/blob/master/src/ajax/load.js)创建自定义加载器,但是您只想调整代码(未经过测试):
$(function() {
$('#main li').on('click', function() {
var $this = $(this);
var url = $(this).data('url');
var selector = $(this).data('target');
$('#container').load(url, function(responseText){
var $content = $("<div>").append($.parseHTML(responseText)).find(selector);
if($content.length)
$this.html($content);
// Else: full content already inserted by jQuery.load
});
});
});
希望这会有所帮助。干杯!
答案 1 :(得分:0)
您最好的选择是使用异步调用来加载文件:
$(document).on('click', '#main li', function () {
var url = $(this).data('url');
var targetSelector = $(this).data('target');
var callback = function (data) {
$(targetSelector).html(data);
};
var dataType = 'text/html';
$.get(url, {}, callback);
});