TA貢獻1873條經驗 獲得超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>
TA貢獻1828條經驗 獲得超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
TA貢獻1886條經驗 獲得超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>
舉報