jquery Dynamically add background color in each elements

<script src="jquery.js"></script>
<ul class="color">
    <li>Demo Text 1</li>
    <li>Demo Text 2</li>
    <li>Demo Text 3</li>
    <li>Demo Text 4</li>
    <li>Demo Text 5</li>
</ul>

<script type="text/javascript">
    $(document).ready(function(e) {
        var colors = new Array('red', 'green', 'blue', 'pink', 'yellow');
        $('ul.color').children('li').click(function(e) {
            $(this).css('background',colors[$(this).index()]);
        });
    });
</script>