我正在关注有关DOM操作主题的“最佳实践”。我虽然遇到了问题。之前,我的代码是:
for(var i=0;i<size;++i){
var $li = $('<li/>',{some propertie..}).data(some values);
$ul.append($li);
}
在阅读了一些性能提示后,我得出结论,我需要将其替换为:
var str_html = '';
for(var i=0;i<size;++i){
var li = '<li ...>...</li>';
str_html += li;
}
$ul.append(str_html);
我的问题是,如何在第二种方法中添加数据参数,就像我在第一种方法中所做的那样(对于每个li元素)? 谢谢!
答案 0 :(得分:2)
自jQuery 1.4.3
起,您可以设置data attributes
have a read。这看起来像是:
var str_html = '';
for(var i=0;i<size;++i){
var li = '<li data-somevalue="foobar">...</li>';
str_html += li;
}
$ul.append(str_html);
jQuery会自动将所有data-
属性拉入元素data-expando。因此,您可以使用以下命令访问上述示例:
$('li').data('somevalue') // === foobar
你实际上可以将任何类型的数据放入这样的属性中,甚至是JSON decoded
对象字符串文字(自动由jQuery解析):
'<li data-somevalue="{'foo':'Barrrrr'}">...</li>';
被翻译成
$('li').data('somevalue').foo // === Barrrr
答案 1 :(得分:0)
我建议你调查jquery template API。
答案 2 :(得分:0)
看一下DocumentFragment(博客文章由Resig自己编写,因此提到的模板API很可能会使用DocumentFragment)。
这是在不使用innerHTML的情况下附加DOM元素的最佳方式。虽然innerHTML几乎总是最快的方法。
如果$ ul是DOM树中已有的元素,您可以通过从树中删除它,向其添加LI元素并重新附加它来加快速度。然而,这不能保证更好的性能:使用分析工具是衡量影响的唯一方法。