为了账号安全,请及时绑定邮箱和手机立即绑定

基于类脚本递增 HTML 标识

基于类脚本递增 HTML 标识

智慧大石 2022-09-23 21:34:52

使用脚本或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++;

}

有什么想法吗?


查看完整描述

3 回答

?
眼眸繁星

TA贡献1551条经验 获得超9个赞

您可以使用 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>


查看完整回答
反对 回复 6天前
?
倚天杖

TA贡献1488条经验 获得超3个赞

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


查看完整回答
反对 回复 6天前
?
MM们

TA贡献1557条经验 获得超2个赞

您可以使用 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>


查看完整回答
反对 回复 6天前
  • 3 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信