基于类Javascript增加HTML ID [重复]

Question

使用 javascript 或 jquery，如何增加具有相同 html 类的项目的 html ID。例如，我有 3 个带有“form_id”类的元素。我希望每个元素的 id 显示为

1. form-0-id
2. form-1-id
3. form-2-id

我正在尝试这个 - 但它不起作用：

var list = $(".formset_id");  
var q = 0
for (var item in list) {
   var newID='form'+q+'-id';
   $(this).attr('id',newID);
   q++;
}

有什么想法吗？

Answer 1

您可以使用 jQuery each 函数来遍历 div。

.html() 调用只是为了让您可以明显地看到结果。删除它并用您自己的代码替换它。每个回调函数的第一个参数是索引，第二个参数是值。

注意：无论您尝试做什么，都可能有更好的解决方案。像这样设置id 通常是没有必要的，这表明你想要实现的任何目标都采用迂回的方法，这很可能是不可靠的。

var list = $(".formset_id");  

list.each(function(q){
  var newID = 'form'+q+'-id';
   $(this).attr('id',newID);
   $(this).html(q);
})

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

详细解释为什么您的代码不能按原样运行，以及为什么您不应该使用 for-in：
（如果您知道自己在做什么并且必须支持旧版浏览器，那就是一个好穷人的对象 [key]：旧浏览器的值迭代器）
for-in 循环遍历对象的所有 键，而不是值。你不应该使用 for-in，因为它还会遍历 jQuery 扩展的内置函数（如 attr、each、map、html 等）。它还破坏了浏览器的优化，而且阅读起来也不干净。
在旧的旧版浏览器中，您只需要它作为穷人的 for-of。为此，您必须添加 .hasOwnProperty 以确保它不是内置方法的键，对于 jQuery 对象，您还必须排除 length 和 prevObject，它们作为属性更新允许它像 Array 和 DOM 一样行事。

var list = $(".formset_id");  
for (var item in list) {
   var newID='form'+item+'-id';
   // skip over special jQuery built-ins unrelated to actual contained elements
   if(!list.hasOwnProperty(item) || item==='length' || item==='prevObject')
     continue;

   $(list[item]).attr('id',newID);
   $(list[item]).html(item);
}

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

Answer 2

它不起作用，因为您还没有掌握一些语言基础知识，例如 this 的工作原理以及 for-in 循环的工作原理。

这是一个非 jQuery 版本，可以满足您的需求，无需大量外部依赖。

document.querySelectorAll(".formset_id")
  .forEach((el, i) => el.id = `form${i}-id`);

.formset_id {
  width: 50px;
  height: 50px;
}

#form0-id {
  background: red;
}

#form1-id {
  background: green;
}

#form2-id {
  background: blue;
}

<div class="formset_id"></div>
<div class="formset_id"></div>
<div class="formset_id"></div>

---

但是，要使您的实际代码正常工作，应该是这样的：

var list = $(".formset_id");  
var q = 0
for (var item in list) {
   var newID='form'+q+'-id';
   $(list[item]).attr('id',newID);
   q++;
}

---

与 jQuery 相比，您可以直接设置元素的 .id 属性。

var list = $(".formset_id");  
var q = 0
for (var item in list) {
   var newID='form'+q+'-id';
   list[item].id = newID;
   q++;
}

---

然后循环体就可以一行完成了。

var list = $(".formset_id");  
var q = 0
for (var item in list) {
   list[item].id = 'form' + q++ + '-id';
}

---

列表的Object.entries 上的for-of 循环也会更好，消除q 变量。

var list = $(".formset_id");  

for (var [i, item] of Object.entries(list)) {
   item.id = 'form' + i + '-id';
}

---

而且使用字符串插值也很好。

var list = $(".formset_id");  

for (var [i, item] of Object.entries(list)) {
   item.id = `form${i}-id`;
}

---

您可以看到唯一的 jQuery 是 DOM 选择，那何必呢？

var list = document.querySelectorAll(".formset_id");  

for (var [i, item] of Object.entries(list)) {
   item.id = `form${i}-id`;
}

现在我们与顶部的演示几乎完全相同，只是我们使用for-of 而不是.forEach 迭代。

Answer 3

您可以使用attr(attributeName, function)，它将遍历整个集合并公开每次迭代的索引

$(".js-form").attr('id', i => `form-${i}-id`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<form action="/" class="js-form">Form 1</form>
<form action="/" class="js-form">Form 2</form>
<form action="/" class="js-form">Form 3</form>
<form action="/" class="js-form">Form 4</form>
<form action="/" class="js-form">Form 5</form>