Question

所以我有多个具有相同ID“棒”的div。我想迭代所有这些元素并给每个元素一个随机高度。这是我试过的：

    <script type="text/javascript">
        for(var i = 0; i < 47; i++) {
            var rand = 200;
            document.getElementsById('stick')[i].style.height= rand+'px';  
        }
    </script>

此代码无法正常工作。我错过了什么吗？

感谢。

Answer 1

您不应为多个元素添加相同的ID。使用类名。并且document.getElemetsById不是定义的函数，只有document.getElementById（没有“s”）才能返回一个元素。

HTML：

    <div class="stick"> </div>
    <div class="stick"> </div>

JS：

<script type="text/javascript">
    var divs = document.getElementsByClassName('stick');
    for(var i = 0; i < divs.length; i++) {
        var rand = 200 * Math.random();
        divs[i].style.height= rand+'px';  
    }
</script>

这可能有效。但我建议使用jQuery框架进行JavaScript编码，因为这些行在jQuery中变成了一个更简单的代码：

<script type="text/javascript">
     $('.stick').each(function(){            //iterates all elements having stick class
         $(this).height(200 * Math.random());       //inside the callback the 'this' is the current html element. etc ...
     });
</script>

jQuery主页：http://jquery.com/

快速包括到您的网站，只需从CDN网址导入jQuery：

   <head>
       ...
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
   </head>

Answer 2

ID在文档中应该是完全唯一的。将您的ID更改为唯一值，您可以单独引用它们。如果您希望对元素集合进行操作，请使用class标记将它们链接在一起。要阅读CSS Classes，您可以查看this documentation。这有助于您了解HTML和CSS中类的用途。

您的问题

getElementsByID()不起作用。 getElementByID()是正确的语法。

所以

document.getElementsById('stick')[i].style.height= rand+'px';

将成为

document.getElementById('stick')[i].style.height= rand+'px';

Answer 3

您不能拥有相同id的多个元素。 id必须唯一。您需要使用class并使用类名检索元素。您可以使用jquery来帮助您：var elements = $('.stick')

将具有相同id的多个div更改为不同的高度

3 个答案: