js如何给多个div添加id

Question

<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>这该怎么实现?用js jquery 都可以

Answer 1

$(".wrap .test").each(function(i) {

    $(this).attr('id', 'test-' + (i + 1))

})

Answer 2

直接JS来改。

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

eles.forEach(function(v, i) {

    v.setAttribute('id', 'test-' + (i + 1))

})

Answer 3

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}`)

}

Answer 4

原生js就4行代码：

    let arr = document.querySelectorAll("div[class='test']");

    for(let i=0; i<arr.length; i++){

        arr[i].setAttribute("id",'test-'+i)

    }