JavaScript增加变量

Question

我想为类.content的每个元素添加ID，我希望每个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_1和content_2，如果我有3个带.content类的元素，则所有这些元素的ID都为{ {1}}

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

Answer 1

在每个循环中使用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)}`);

Answer 2

试试这个：

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

注意：你可以使用vanilla JS来分配属性id（不需要使用jQuery）

Answer 3

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

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

Answer 4

使用此运算符

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

Answer 5

试试这个

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

这是逐个迭代单个元素，而不是使用.content

获取所有元素