Question

我想选择html中有多少div。所以我用.length方法，但它没有给我欲望的结果。您可以在此处查看演示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>

Answer 1

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

Answer 2

如果您的脚本在页面加载时运行，则在div存在之前，还没有div。您应该添加页面加载事件以触发代码。你的jsfiddle工作正常...它已经为代码启用了onload。

http://jsfiddle.net/EEjaP/

Answer 3

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

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

以上行只选择HTML页面上的Div标签。现在，当前的HTML包含三个包含在主DIV中的DIV标签，即总共4个DIV元素。所以，First alert是'4'。

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

此代码循环遍历四个DIV标记。 innerHTML用于显示div内的内容。你将看到，首先整个DIV块被警告。在此之后，每个div都会收到警报。

请告诉我这是你想要的？

Answer 4

您只需使用.length即可。就像这样...... jsFiddle

为了确保您的DOM已完全加载，您可以将脚本放在html文档的末尾，就在结束body - 标记之前。

HTH，

- hennson

Answer 5

试试这个

    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

Answer 6

将脚本更改为：

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

Answer 7

根据您的澄清评论，您希望结果为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-method需要一个字符串，它会将您的对象转换为字符串表示形式[object htmlDivElement]。

Answer 8

试试这个 -

.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>

循环在JavaScript中无法正常工作

8 个答案: