如何在jQuery中限制DOM操作 - 附加元素

时间:2011-02-16 10:14:50

标签: javascript jquery dom

我正在关注有关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元素)? 谢谢!

3 个答案:

答案 0 :(得分:2)

自jQuery 1.4.3起,您可以设置data attributeshave 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元素并重新附加它来加快速度。然而,这不能保证更好的性能:使用分析工具是衡量影响的唯一方法。