Javascript - 使用 for 循环添加元素 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19261518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Add element id using for loop
提问by azochz
I'm trying to update a set of divs class="oct_days"to give them id based on :nth-child(n). The format of the idis oct_n. I'm trying to accomplish this using a for loop to set this for divs.
我正在尝试更新一组 divclass="oct_days"以根据:nth-child(n). 的格式id是oct_n. 我正在尝试使用 for 循环为 div 设置它来完成此操作。
window.onload = function addOctDate() {
var cls = document.getElementByClass("oct_days");
for (var n = 1; n < 32; n++) {
cls[n].id = "oct_" + n;
}
};
Fiddle (http://jsfiddle.net/ascottz/D9Exm/)
小提琴（http://jsfiddle.net/ascottz/D9Exm/）
The idea is to have .oct_days:nth-child(1)have id="oct_1", but id isn't being set.
这个想法是.oct_days:nth-child(1)have id="oct_1"，但没有设置 id 。
回答by Matti Virkkunen
The function is getElementsByClassName.
函数是getElementsByClassName。
The fiddle doesn't work because you're seeing window.onloadwhile your code is already being run inside that event (the dropdown on the left says onLoad). It'll also error out because you don't have 31 elements in the HTML, but it'll still set the IDs.
小提琴不起作用，因为您看到window.onload您的代码已经在该事件中运行（左侧的下拉列表显示 onLoad）。它也会出错，因为 HTML 中没有 31 个元素，但它仍然会设置 ID。
回答by Fisch
clsyour issues are this:
你的问题是这样的：
- window.onload was being run before your html was initialized
- you need to call
document.getElementsByClassNamenot - you are starting your iteration at 1, indexes are 0 based and you should start there and add the
+ 1as noted below - also, while iterating, its good to only iterate only over the known items in your list
- window.onload 在您的 html 初始化之前正在运行
- 你需要打电话
document.getElementsByClassName不 - 您从 1 开始迭代，索引基于 0，您应该从那里开始并添加
+ 1如下所述 - 此外，在迭代时，最好只迭代列表中的已知项目
try this code:
试试这个代码：
function addOctDate() {
var cls = document.getElementsByClassName("oct_days");
for (n=0, length = cls.length; n < length; n++) {
cls[n].id= "oct_" + (n + 1);
}
};
addOctDate()
回答by Jay Harris
Your code is very simple to fix
您的代码很容易修复
(function () {
// .getElementsByClassName not .getElementByClass
var cls = document.getElementByClassName("oct_days"),
// set the stopping point DYNAMICALLY
len = cls.length,
// start the index at 0;
n = 0;
for (; n < len; n++) {
cls[n].id = "oct_" + (n + 1);
}
// ()(); auto runs the function
})();
回答by jaguarj
Here is a way to add ids to elements and classes using just plain js.
这是一种仅使用普通 js 将 id 添加到元素和类的方法。
HTML
HTML
<div id="test">
Content will append below!
<input type="button" value="click me!" onClick="myFunction();"/>
</div>
CSS
CSS
.cool_0 {
background: red;
height: 200px;
width: 100%;
}
.cool_1 {
background: yellow;
height: 200px;
width: 100%;
}
.cool_2 {
background: red;
height: 200px;
width: 100%;
}
.cool_3 {
background: yellow;
height: 200px;
width: 100%;
}
.cool_4 {
background: red;
height: 200px;
width: 100%;
}
.cool_5 {
background: yellow;
height: 200px;
width: 100%;
}
JS
JS
function myFunction(){
var myId = 0;
var counter = 0;
var myDiv = document.getElementById("test")
for(var i = 0; i < 5; i++){
var textNode = document.createTextNode("sup! My current id is "+myId+" !")
var t = document.createElement("div");
t.setAttribute("id", counter++)
t.setAttribute("class", "cool_"+myId++)
t.appendChild(textNode)
myDiv.appendChild(t);
}
}
