不同<li>的Javascript随机数

时间:2015-05-28 20:25:58

标签: javascript jquery

我有很多<li>不同的身高和宽度。我想为每个列表样式生成随机数。例如,10个列表样式中包含不同的innerHTML个数字。如果我错了,请纠正我。

function getNumber() {
    var minNumber = 0;
    var maxNumber = 10;
    var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
    for (i = 0; i < 5; i++) {
        $('ul li').html(randomnumber);
    }
    return false;
}

请指导我或给我建议。感谢。

2 个答案:

答案 0 :(得分:2)

您的代码的主要问题是您在循环的每次迭代中为所有li元素分配相同的随机数。相反,您应该遍历每个li元素并在每次迭代中生成一个新的随机数。试试这个:

function getNumber() {
    $('ul li').each(function() {
        var minNumber = 0;
        var maxNumber = 10;
        var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
        $(this).html(randomnumber);
    });
}

Example fiddle

答案 1 :(得分:0)

这是正确的方法。 在DOM完全加载$()时运行代码,并且可能将随机数生成的逻辑放在不同的函数中以获得更好的可重用性。 您可以将上面的代码复制粘贴到文本文件中进行测试。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            function getRandomNumber(minNumber, maxNumber){
                return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
            }
            $(function(){
                var minNumber = 0;
                var maxNumber = 10;
                $("ul li").each(function(){
                    $(this).html(getRandomNumber(minNumber,maxNumber));
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>