基于类脚本递增 HTML 标识

Question

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

1. 表单-0-标识

2. 表单-1-标识

3. 表单-2-标识

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

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 每个函数来迭代 div。.html()调用只是为了让您能够明显看到结果。删除它并将其替换为你自己的代码。每个回调函数的第一个参数是索引，第二个参数是值。注意：对于您要尝试执行的任何操作，都有更好的解决方案。这样的设置通常是不必要的，并且表明一个迂回的方法，无论你试图实现什么，很可能是不可靠的。idvar list = $(".formset_id");&nbsp;&nbsp;list.each(function(q){&nbsp; var newID = 'form'+q+'-id';&nbsp; &nbsp;$(this).attr('id',newID);&nbsp; &nbsp;$(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]：对于较旧的浏览器来说，value迭代器）for-in循环遍历对象的所有键，而不是值。您不应该使用 for-in，因为它还会迭代 jQuery 扩展的内置函数（如 、 、 等）。它还破坏了浏览器优化，并且阅读起来并不干净。你只需要它作为一个穷人在旧的旧版浏览器中的for-for-为此，您必须添加以确保它不是内置方法的键，并且在jQuery对象的情况下，您还必须排除和 ，它们被更新为属性以允许它像数组一样和类似DOM。attreachmaphtml.hasOwnPropertylengthprevObjectvar list = $(".formset_id");&nbsp;&nbsp;for (var item in list) {&nbsp; &nbsp;var newID='form'+item+'-id';&nbsp; &nbsp;// skip over special jQuery built-ins unrelated to actual contained elements&nbsp; &nbsp;if(!list.hasOwnProperty(item) || item==='length' || item==='prevObject')&nbsp; &nbsp; &nbsp;continue;&nbsp; &nbsp;$(list[item]).attr('id',newID);&nbsp; &nbsp;$(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

它不起作用，因为你还没有掌握一些语言基础知识，比如如何工作，以及循环是如何工作的。thisfor-in这是一个非jQuery版本，它可以做你想要的，而不需要大量的外部依赖项。document.querySelectorAll(".formset_id")&nbsp; .forEach((el, i) => el.id = `form${i}-id`);.formset_id {&nbsp; width: 50px;&nbsp; height: 50px;}#form0-id {&nbsp; background: red;}#form1-id {&nbsp; background: green;}#form2-id {&nbsp; background: blue;}<div class="formset_id"></div><div class="formset_id"></div><div class="formset_id"></div>但是，要使实际代码正常工作，它将如下所示：var list = $(".formset_id");&nbsp;&nbsp;var q = 0for (var item in list) {&nbsp; &nbsp;var newID='form'+q+'-id';&nbsp; &nbsp;$(list[item]).attr('id',newID);&nbsp; &nbsp;q++;}离jQuery一步，你可以直接设置元素的属性。.idvar list = $(".formset_id");&nbsp;&nbsp;var q = 0for (var item in list) {&nbsp; &nbsp;var newID='form'+q+'-id';&nbsp; &nbsp;list[item].id = newID;&nbsp; &nbsp;q++;}然后循环体可以在一行中完成。var list = $(".formset_id");&nbsp;&nbsp;var q = 0for (var item in list) {&nbsp; &nbsp;list[item].id = 'form' + q++ + '-id';}在列表中循环也会更好，消除变量。for-ofObject.entriesqvar list = $(".formset_id");&nbsp;&nbsp;for (var [i, item] of Object.entries(list)) {&nbsp; &nbsp;item.id = 'form' + i + '-id';}使用字符串插值也很好。var list = $(".formset_id");&nbsp;&nbsp;for (var [i, item] of Object.entries(list)) {&nbsp; &nbsp;item.id = `form${i}-id`;}你可以看到，唯一的jQuery是DOM选择，所以为什么要打扰呢？var list = document.querySelectorAll(".formset_id");&nbsp;&nbsp;for (var [i, item] of Object.entries(list)) {&nbsp; &nbsp;item.id = `form${i}-id`;}现在，我们几乎与顶部的演示完全相同，只是我们使用的是迭代而不是迭代。for-of.forEach

Answer 3

您可以使用&nbsp;attr（属性名称，函数），它将循环访问整个集合，并公开每次迭代的索引$(".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>