javascript中的循环不起作用

loop in javascript not working

本文关键字：不起作用 循环 javascript      更新时间：2023-09-26

我想选择html中有多少div。所以我用了.长度的方法，但并没有给我想要的结果。你可以在这里看到一个演示http://jsfiddle.net/WbwuC/

<style>
.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}
.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}
.new {border:solid 2px #333;}
</style>

<script type="text/javascript">

    var amy= document.getElementsByTagName('div');
    for (i=0;i<amy.length;i++){
        var jar= amy[i];
        }
     alert(jar)

</script>
</head>
<body>
<div id="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3>secnond</h3></div>
<div class="box"><h3>third</h3></div>
</div>
</body>

这不起作用，因为在脚本执行时，文档还没有像正文中的div那样处理。尝试将脚本移动到div下，或者等待文档加载事件。

如果脚本在加载页面时运行，那么在div出现之前，还没有div。您应该添加一个页面加载事件来触发代码。你的jsfiddle工作得很好…它已经为代码启用了onload。

http://jsfiddle.net/EEjaP/

这是工作演示。但真的不明白你的期望。请在下面找到代码的解释。

var amy= document.getElementsByTagName('div');

上面一行只是选择HTML页面上的Div标签。现在，当前的HTML包含三个封装在主DIV中的DIV标记，即总共4个DIV元素。所以，第一个警报是"4"。

for (var i=0;i<amy.length-1;i++){
        var jar= amy[i];
        alert(jar.innerHTML);
}​

此代码循环使用四个DIV标记。innerHTML用于显示该div中的内容。您将看到，首先，整个div块都发出了警报。之后，每个div都会收到警报。

求你了，让我知道这就是你想要的？

您可以简单地使用.length。就像这样。。。jsFiddle

为了确保您的DOM已完全加载，您可以将脚本简单地放在html文档的末尾，刚好在关闭body-标记之前。

HTH，

--hennson

试试这个

    for (i=0;i<amy.length;i++){
        var jar= amy[i];
 alert(jar) //put  it here , ur problem will be solved
        }
//     alert(jar) //Dont put here

将脚本更改为：

<script type="text/javascript">
    var amy = document.getElementsByTagName('div');
    for (i = 0; i < amy.length; i++) {
        var jar = i;
    }
    alert(jar)​;
</script>

根据您的澄清注释，如果您希望结果为4，最简单的方法是使用.length，就像您在自己的示例中在循环中所做的那样！，无需循环：

var length = amy.length; // Will return 4

然而，如果你想循环，你可以使用这样的循环（非常不必要，因为你可以使用上面的长度属性！）

var length = 0;
for (i=0; i<amy.length; i++){
   length++;
}
// After the loop has run, length will have value 4

为了让代码正常工作，您必须等待执行，直到DOM准备就绪。

此外，对于您的示例中的警报，您正在尝试向对象发出警报。由于alert方法需要一个字符串，它会将对象转换为其字符串表示[object htmlDivElement]。

试试这个-

.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}
.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}
.new {border:solid 2px #333;}
</style>

<script type="text/javascript">
function count() {
    var amy= document.getElementsByTagName('div');
    for (i=0;i<amy.length;i++){
        var jar= amy[i];
    }
     alert(jar.className);
}

</script>
</head>
<body onload="count()">
<div id="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3>secnond</h3></div>
<div class="box"><h3>third</h3></div>
</div>
</body>
相关文章：