javascript - 通过javascript在html标签内添加一个额外的属性

Question

假设我们有一组 html 标签，比如

<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>

我正在尝试在 div 标签中添加一个额外的属性，例如从 每个标签key='post'的数组中分别添加一个属性。[post, get, search]是否可以使用javascript来做到这一点？

我也想知道如果输入是散列而不是像数组这样的

 {"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]} 

Answer 1

var attrs = ['post', 'get', 'search'];
for (var i = 0, n = attrs.length; i < n; ++i) {
    var el = document.getElementById('slide' + (i + 1));
    el.setAttribute('key', attrs[i]);
}

或者，如果您使用的是 jQuery（并假设只有这三个元素具有slide该类）：

var attrs = ['post', 'get', 'search'];
$('.slide').attr('key', function(i) {
    return attrs[i];
});

问题的更新部分（使用对象“哈希”而不是数组）不起作用，因为对象没有定义的顺序。您可以获得标签，但它们不会以确定的顺序出现：。

var myobj = {"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]};
var attrs = Object.keys(myobj);
... // as above

有关 的文档Object.keys，请参阅 MDN 站点，包括适用于旧浏览器的 shim。

Answer 2

是的，这是可能的，只需像这样使用 element.setAttribute() ：

var element = document.getElementById("slide1");
element.setAttribute('key','post');

Answer 3

设置属性是您正在寻找的：

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

var d = document.getElementById("slide1"); 
d.setAttribute("key", "post");