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

1 comments:

comments

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
cheer