基于类脚本递增 HTML 标识

Question

使用脚本或jquery，我如何为具有相同html类的项目增加HTML ID。例如，我有3个元素，类为“form_id”。我希望每个相应元素的 id 显示为表单-0-标识表单-1-标识表单-2-标识我正在尝试这个 - 但它不起作用：var list = $(".formset_id");  var q = 0for (var item in list) {   var newID='form'+q+'-id';   $(this).attr('id',newID);   q++;}有什么想法吗？

Answer 1

您可以使用 jQuery 每个函数来迭代 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]：对于较旧的浏览器来说，value迭代器）

for-in循环遍历对象的所有键，而不是值。您不应该使用 for-in，因为它还会迭代 jQuery 扩展的内置函数（如 、 、 等）。它还破坏了浏览器优化，并且阅读起来并不干净。

你只需要它作为一个穷人在旧的旧版浏览器中的for-for-为此，您必须添加以确保它不是内置方法的键，并且在jQuery对象的情况下，您还必须排除和 ，它们被更新为属性以允许它像数组一样和类似DOM。attreachmaphtml.hasOwnPropertylengthprevObject

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

它不起作用，因为你还没有掌握一些语言基础知识，比如如何工作，以及循环是如何工作的。thisfor-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';

}

在列表中循环也会更好，消除变量。for-ofObject.entriesq

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（属性名称，函数），它将循环访问整个集合，并公开每次迭代的索引

$(".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>