我正在尝试使用jquery使css选择器随机化其html元素上的值之一。我已经对所有元素的选择器进行了随机化(遍历列表左边框的颜色),但是我想同时对每个单独的列表元素进行随机化。

抱歉,这很令人困惑(我自己对此感到困惑),但是如果您几次运行以下代码并注意边框颜色的变化,您将理解。理想情况下,这些边框颜色将全部不同。

非常感谢您的帮助。

<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
    <style>
    .bars{
        border-left-style: solid;
        border-left-width: 4px;
        padding-left: 10px;
    }

    ul{
        list-style-type: none;
    }
    </style>

</head>
<body>
        <ul>
            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>
         </ul>
</body>
<script>
    $(document).ready(function(){
      var colors = ["#CCCCCC","#333333","#990099"];
      var rand = Math.floor(Math.random()*colors.length);
      $('.bars').css("border-left-color", colors[rand]);
    });
</script>




http://jsfiddle.net/RMR42/

最佳答案

您可以使用jQuery.each()函数指定单个颜色:http://jsfiddle.net/qaF24/

$(document).ready(function(){
    var colors = ["#CCCCCC","#333333","#990099"];
    $('.bars').each(function() {
        var rand = Math.floor(Math.random()*colors.length);
        $(this).css("border-left-color", colors[rand]);
    });
});

09-18 23:58