如何仅使用javascript获取框索引号

How to get box index number using only javascript

本文关键字：索引 获取 javascript 何仅使      更新时间：2023-09-26

我想使用Javascript获取框索引号。就像我有四个方框，所以我希望每个方框的文本都有这个合适的数字。

<head>
  <script type="text/javascript">
  function () {
   var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){

}
  }
  </script>
  <style>
  .box {
    float:left;
    margin-left:20px;
    position:relative
  }
  .width {
    position:absolute;
    left:0;
    top:0;
    color:#FFF;
    font-size:20px;
  }
  </style>
</head>
<body>
  <div id="container">
    <div class="box">
      <img src="img/sample1.jpg" height="200" width="300" />
    </div>
    <div class="box">
      <img src="img/sample2.jpg" height="200" width="350" />
    </div>
    <div class="box">
      <img src="img/sample3.jpg" height="200" width="150" />
    </div>
    <div class="box">
      <img src="img/sample4.jpg" height="200" width="100" />
    </div>
  </div>
</body>

window.onload=function() {
   var Main= document.getElementById('container').getElementsByTagName('div');
  for(var i=0; i<Main.length;i++){
    Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
  }
}

演示

用下面的这个替换所有JS，并将script标记作为body标记中的最后一个标记，以确保DOM在调用时准备就绪。您也可以从onload事件调用此函数。

(function(){
    var Main= document.getElementById('container').getElementsByTagName('div');
    for(var i=0; i<Main.length;i++){
      Main[i].innerHTML += "box"+i;
    }
})();

http://jsfiddle.net/mmjW9/

相关文章：