鍍金池/ 問答/HTML/ js如何給多個div添加id

js如何給多個div添加id

<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>

我想要給每個.test添加id

變成

<div class="test" id="test-1"></div>
<div class="test" id="test-2"></div>
<div class="test" id="test-3"></div>

這該怎么實(shí)現(xiàn)?

用js jquery 都可以

回答
編輯回答
孤島

原生js就4行代碼：

    let arr = document.querySelectorAll("div[class='test']");
    for(let i=0; i<arr.length; i++){
        arr[i].setAttribute("id",'test-'+i)
    }

clipboard.png

2017年3月6日 22:48
編輯回答
帥到炸

直接JS來改。

var eles = document.querySelectorAll('.wrap .test');

eles.forEach(function(v, i) {
    v.setAttribute('id', 'test-' + (i + 1))
})
2017年8月17日 20:22
編輯回答
乖乖噠

簡單粗暴一點(diǎn)可以直接拼接字符串

<div id="container"></div>


  var oContainer = document.getElementById("container")
  var childs = ''
  for (var i = 0; i < 30; i++) {
    childs += "<div id="+ i + ">" + i + "</div>"; //拼接childs 
  }
  oContainer.innerHTML = childs
2018年1月6日 05:43
編輯回答
雨蝶
const classname = 'test';
let tests = document.querySelectorAll(`.${classname}`);
for (let i = 0, length = tests.length; i < length; i++) {
   tests[i].setAttribute('id', `${classname}-${i + 1}`)
}
2017年5月18日 01:09
編輯回答
遺莣
$(".wrap .test").each(function(i) {
    $(this).attr('id', 'test-' + (i + 1))
})
2017年11月26日 07:39
編輯回答
離殤
var test=$(".test")
for(var i=0;i<test.length;i++){
    test[i].id='test-' + (i + 1)
}
2017年5月1日 10:40