Question

有没有办法像这样使用原始字符串设置DOM元素属性？

data-attr1name="attr1val" data-attr2name="attr2val" data-attr3name="attr3val"

是的我可以解析字符串并使用$(..).attr()来设置每个值，但我正在寻找一种方法来避免因为性能原因而无法进行双重转换（可能会收到很多来自服务器的数据和每个标签有很多属性，因此将一个标签的所有属性设置为一次通过可以在前端提供轻松的改进。无论如何，如果我已经有一部分重新使用的sanatized HTML代码 - 为什么不直接使用它。

UPD ：这与关于如何在一次调用中设置多个属性的问题不重复，因为我正在寻找一种方法避免解析属性值，所以以下解决方案不回答我的问题：

d.setAttributes({
'id':'my_div',
'class':'my_class',
'styles':{
    'backgroundColor':'blue',
    'color':'red'
},
'html':'lol'
});

因为我仍然必须以这种方式解析源字符串

UPD2 只是为了解释：这个字符串由控制器发送，生成它以在Smarty模板中使用，如下所示：<a href="#" class="someclasses"{$additional_tags}></a>，但在这种情况下我收到的字符串不是一个聪明的变量但作为ajax答案的一部分。

Answer 1

这确实回答了这个问题，但不一定是个好主意。

它在outerHTML上使用替换回调，并且回调几乎总是比替代方法更昂贵。

我无法想象，除非你有一个非常疯狂的元素数量，否则按顺序设置属性的性能影响很大，但是仍然存在：

var
el = document.querySelector('p'),
attrs = 'style="color: blue" title="hello" data-etc="foo"';
el.outerHTML = el.outerHTML.replace(/<[^ >]+/i, function(tag) { return tag+' '+attrs; });

Fiddle

有没有办法使用原始字符串在一次传递中将几个属性设置为一个标记？

1 个答案: