javascript - 如何限制 jQuery 中的 DOM 操作 - 追加元素

Question

我遵循有关 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 元素)？ 谢谢!

Answer 1

从 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 解码 对象字符串文字(由 jQuery 自动解析):

'<li data-somevalue="{'foo':'Barrrrr'}">...</li>';

翻译成

$('li').data('somevalue').foo // === Barrrr