我有以下代码:
HTML
<div id="body"></div>
JS
var site = { 'pageData' : [
{
'loadInTo' : '#aboutUs',
'url' : 'aboutUs.html',
'urlSection' : '.sectionInner'
},
{
'loadInTo' : '#whatWeDo',
'url' : 'whatWeDo.html',
'urlSection' : '.sectionInner'
},
{
'loadInTo' : '#ourValues',
'url' : 'ourValues.html',
'urlSection' : '.sectionInner'
},
{
'loadInTo' : '#ourExpertise',
'url' : 'ourExpertise.html',
'urlSection' : '.sectionInner'
}
]}
for(i=0; i < site.pageData.length; i++) {
var loader = site.pageData[i];
$('#body').append('<div id="'+ loader.loadInTo +'" class="section" />');
$(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
}
我正在做的是循环遍历站点变量并使用jQuery的append方法写出一些div,这些方法在'loadInTo'中设置了id,这很好用。完成后我想使用jQuery的load方法用其他页面的HTML填充div。在追加div之后是否有回调?像这样的东西:
$('#body').append('<div id="'+ loader.loadInTo +'" class="section" />', function(){
$(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
});
答案 0 :(得分:3)
jQuery不支持.append
的回调。此外,一次追加数据要more efficient,而不是为每个元素调用.append
。请参阅下面的代码。
每个要追加的元素都会添加到字符串中。字符串完成后,添加标记,并附加HTML。然后,激活轮询器,检查DOM中是否存在marker
元素。如果存在,则清除轮询器,删除标记,然后执行代码。
更新:设置ID时使用.substr(1)
,因为ID不应以#
作为前缀。
var toAppend = '';
var markerID = 'mark-end-of-append' + (new Date).getTime(); //Random
for(var i=0; i<site.pageData.length; i++) {
var loader = site.pageData[i];
toAppend += '<div id="'+ loader.loadInTo.substr(1) +'" class="section" />';
}
toAppend += '<div id="' + markerID + '"></div>';
$('#body').append(toAppend);
var poller = window.setInterval(function(){
var detected = document.getElementById(markerID);
if(detected){ //DOM is much more efficient
window.clearInterval(poller);
$(detected).remove(); //Remove marker
for(var i=0; i<site.pageData.length; i++){
var loader = site.pageData[i];
$(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
}
}
}, 100); //Check 10x per second
答案 1 :(得分:1)
为什么回调? $(...).append()
是异步调用吗? I think not,为什么不写另一个陈述?
如果你所追求的是避免代码复制,你可以在一个临时变量中创建新的部门:
for( ... ) {
var loader = ...;
var newDiv = createDiv( {id:loader.loadInto } );
$('#body').append( newDiv );
$(newDiv).load( loader.url + ' ' + loader.urlSection );
}
createDiv函数可能看起来像
function createDiv( settings ) {
document.createElement('div');
$(div).class("section");
$(div).id(settings.id);
return div;
}
答案 2 :(得分:0)
在jquery中,您可以在附加内容代码之后使用$()。这样,您可以在对附加内容执行任何任务之前,确保已加载内容并且DOM已准备就绪。
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});
$()调用一个函数,该函数注册一个DOM就绪的回调(如果将函数传递给它)或从DOM返回元素(如果将选择器字符串或元素传递给它)
您可以在此处找到更多内容
difference between $ and $() in jQuery
http://api.jquery.com/ready/