Question

我正在尝试更新一组div class="oct_days"，根据:nth-child(n)为其提供ID。 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;
    }
};

小提琴（http://jsfiddle.net/ascottz/D9Exm/）

我们的想法是让.oct_days:nth-child(1)拥有id="oct_1"，但不会设置ID。

Answer 1

该功能为getElementsByClassName。

小提琴不起作用，因为当你的代码已经在该事件中运行时你看到window.onload（左边的下拉列表显示onLoad）。它也会出错，因为你在HTML中没有31个元素，但它仍然会设置ID。

Answer 2

clsyour问题是这样的：

在初始化html之前正在运行window.onload
您需要致电document.getElementsByClassName而不是
您开始迭代为1，索引为0，您应该从那里开始并添加+ 1，如下所示
同样，在迭代时，只能对列表中的已知项进行迭代

试试这段代码：

function addOctDate() {
        var cls = document.getElementsByClassName("oct_days"); 
        for (n=0, length = cls.length; n < length; n++) {
            cls[n].id= "oct_" + (n + 1); 
        }
    }; 

addOctDate()

Answer 3

您的代码修复非常简单

(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 
})();

Answer 4

这是一种使用简单的js将元素和类添加到id的方法。

HTML

<div id="test">
    Content will append below!
    <input type="button" value="click me!" onClick="myFunction();"/>
</div>

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

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);
        }
    }

Javascript - 使用for循环添加元素id

4 个答案: