javascript - JavaScript 增加变量

Question

我想将 ID 添加到 class 的每个元素.content，并且我希望每个 ID 的整数增加 1。示例：

<div class="content" id="content_1"></div>
<div class="content" id="content_2"></div>

等等。我写了如下代码：

var number = 1;
$(".content").each(function() { 
    $('.content').attr('id', 'content_' + number);
    number++;
});

此代码添加content_2到它们而不是content_1and content_2，如果我有 3 个元素的.content类，它们的 ID 将为content_3

有什么想法可以解决这个问题吗？

score 19 · Accepted Answer

this在每个循环中使用：

$(".content").each(function(index) { 
    this.id = 'content_' + index;
});

否则，您将选择所有具有类的元素.content

JS唯一方法：

var content = document.querySelectorAll('.content');

[].forEach.call(content, function(item, index) {
  item.id = "content_" + (index+1);
});

ES6/ES2015 语法：

let content = document.querySelectorAll('.content');

[].forEach.call(content, (item, index) => item.id = `content_${(index+1)}`);

score 7 · Accepted Answer

尝试这个：

var number = 1;
$(".content").each(function() { 
    this.id = 'content_' + number;
    number++;
});

注意：您可以只使用 vanilla JS 来分配属性id（无需使用 jQuery）

score 4 · Accepted Answer

您可以使用.each函数回调的 index 参数代替您自己的计数器：

$(".content").each(function(i) {
  $(this).prop('id', 'content_' + (i+1));
});

score -1 · Accepted Answer

尝试这个

var number = 1;
$(".content").each(function() { 
    this.id = 'content_' + number++;
});

这是一个一个地迭代单个元素，而不是使用 .content 获取所有元素

score -1 · Accepted Answer

使用此运算符

    var number = 1;
$(".content").each(function() { 
    $('.content').attr('id', 'content_' + number);
    number++;
});

或者

var length = $(".content").length;

for(i=1;i<length;i++){

    $('.content')[i].attr('id', 'content_' + i);
}

5 回答 5