为什么使用计数器更改属性不起作用？答案

【问题标题】：Why using a counter to change an attribute isn't working?为什么使用计数器更改属性不起作用？
【发布时间】：2021-09-14 16:56:46
【问题描述】：

目前我拥有所有 index=1 的 div：

<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>

我希望他们像：

<div class="test" index="1"></div>
<div class="test" index="2"></div>
<div class="test" index="3"></div>
<div class="test" index="4"></div>

我试过了，还是不行：

var count = 0;
$('.test').each(function(i) {
    $('.test').attr("index", count);
    count++;
});

【问题讨论】：

标签： jquery counter attr

【解决方案1】：

$('.test').attr 设置 all .tests 的属性。你需要选择当前被迭代的元素——要么使用this，要么使用each的第二个参数。您还需要从 1 开始计数器，而不是 0。

var count = 1;
$('.test').each(function(i) {
  $(this).attr("index", count);
  count++;
});
console.log(document.body.innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>

您也可以完全省略count 变量并使用迭代索引。

$('.test').each(function(i) {
  $(this).attr("index", i + 1);
});
console.log(document.body.innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>
<div class="test" index="1"></div>

【讨论】：

非常感谢！只是忘了通过 $(this).. 选择它.. :) 但我真的希望这些索引以 0 开头。而这段代码不可能做到这一点：/