Question

我想使用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>

Answer 1

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

DEMO

Answer 2

将下面的所有JS替换为以下内容，并将脚本标记作为body标记中的最后一个标记，以确保调用DOM时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/

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

2 个答案: