怎样用JS给class名相同的一组元素设置自增的属性值？

Question

<span class="close" index-num="0"></span>
<span class="close" index-num="1"></span>
<span class="close" index-num="2"></span>
<span class="close" index-num="3"></span>

如上代码是我想要的结果，因为我不能确定span元素的数量，所以我想在js里面用for循环给它设置属性，但是循环完成后每个index-num属性的值都变成了length-1,代码如下。

var spans = $('.close');
for(var i=0; i<spans.length; i++){
    spans.attr('index-num', i);
}

请问我应该怎么解决？

Answer 1

html

<span class="close"></span>
<span class="close"></span>
<span class="close"></span>
<span class="close"></span>

js

$('.close').each(function (i) {
  $(this).attr('index-num', i);
})

Answer 2

你的代码逻辑错了，spans.attr('index-num', i);
这段代码是对所有的span.close进行操作了，所以你得到的结果是每个都是length-1. 你可以换成spans.eq(i).attr('index-num',i); 进行操作,或者使用回答中的其他人的答案。

Answer 3

jquery中有个index方法可以确定元素所在位置

是在不知道题主要做什么

Answer 4

var spans = $('.close');
spans.each(function() {
    $(this).attr('index-num', $(this).index())
})