创建多个格结构动态
问题描述:
使用jQuery用于创建动态的结构,创建多个格结构动态
我试图解决一个问题,一个div ..
但是,我不知道为什么?我的div “内容” 直接关闭...
我的结果:
<li class="monde">
<div class="content">
</div> // -----------> problem content div here
<div class="ctn_img">
<img src="myimage.png" />
</div>
<div class="choix">
<input type="checkbox" class="checkbox" />
</div>
<div class="infos">
<span class="caption">
<a href="#"><span class="stats">Etats</span></a>
<input type="text" class="name" />
<span class="test">test</span>
</span>
</div>
// <-------------- better content close here...
<span class="glob">Global</span>
</li>
答
那么你应该追加连班.ctn_img
,.choix
和.infos
元素.content
,而不是<li>
,即
// ...
ctn_img = $('<div>').addClass('ctn_img').append(image).appendTo(content),
choix = $('<div>').addClass('choix').html('<input ... />').appendTo(content),
infos = $('<div>').addClass('infos').append(caption).appendTo(content),
// ...
result = $('<li>').addClass('monde').append(content, glob);
答
var content = $('<div>').addClass('content'),
image = $("<img>").attr('src', 'myimage.png'),
ctn_img = $('<div>').addClass('ctn_img').append(image),
choix = $('<div>').addClass('choix').html('<input type="checkbox" class="checkbox" />'),
caption = $('<span>').addClass('caption').html('<a href="#"><span class="stats">Etats</span></a><input type="text" class="name"></span><span class="test">test</span>'),
infos = $('<div>').addClass('infos').append(caption),
glob = $('<span>').addClass('glob').html('Global');
content.append(ctn_img).append(choix).append(infos).append(glob);
var result = $('<li>').addClass('monde').append(content);
$(document.body).html(result);
+0
所有的答案是帮了我,所以谢谢@razzak ... – Kate 2013-04-21 22:30:08
答
您当前的做法至少有两个缺点:
- 真的很难保持结构(你面临这个问题)。
- 太多
append
和DOM操作会降低性能。
怎么样建立HTML这样的:
var result = $([
'<li class="monde">',
'<div class="content">',
'<div class="ctn_img">',
'<img src="myimage.png">',
'</div>',
'<div class="choix">',
'<input type="checkbox" class="checkbox">',
'</div>',
'<div class="infos">',
'<span class="caption">',
'<a href="#"><span class="stats">Etats</span></a>',
'<input type="text" class="name">',
'<span class="test">test</span>',
'</span>',
'</div>',
'</div>',
'<span class="glob">Global</span>',
'</li>'
].join(''));
$(document.body).html(result);
更容易阅读。或考虑使用模板。
谢谢你,我知道是我的问题,现在:) +1 – Kate 2013-04-21 22:09:54
@Kate欢迎您:) – VisioN 2013-04-21 22:14:40