MultiColor List in JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#b1").click(function () {
                var ar = ["red", "green", "blue"];
                var i = 0;
                $("#list1 li").each(function () {
                    $(this).css("color", ar[i]);
                    i = i + 1;
                    if (i == ar.length) {
                        i = 0;
                    }
                });
            });
           
        });
    </script>
</head>
<body>
    <button id="b1">Apply Styles</button>
    <ul id="list1">
        <li>Home </li>
        <li>Course</li>
        <li>Project</li>
        <li>About US</li>
        <li>Contact US </li>
        <li>Data</li>
        <li>Home </li>
        <li>Course</li>
        <li>Project</li>
        <li>About US</li>
        <li>Contact US </li>
        <li>Data</li>
        <li>Home </li>
        <li>Course</li>
       
    </ul>
</body>
</html>



Share this

Previous
Next Post »

1 comments:

comments