Iterate Through Dynamic tags and populate using jquery

I have this so far...

<script type="text/javascript">
    $(document).ready(function () {
        $('ul').addClass('navMenu');
        $('li').addClass('todo').html("<span class='navItemHead'></span>");
        $('span.navItemHead').wrap("<a href='/My/Website'></a>");
    });
</script>

I have four names I want to put into the name tag Mary,Nick,Matt,Meg and 1,2,3,4 in the span tag, so the final html should read.....

 <li class="todo ">
        <a href="/Register/Website"><span class="navItemHead">1</span>Mary</a>       
 </li>
 <li class="todo ">
        <a href="/Register/Website"><span class="navItemHead">2</span>Nick开发者_如何学运维</a>
 </li> ....etc

var names = ['Mary', ...];
$('li').addClass('todo').html(function (i) {
    return "<a href='/My/Website'><span class='navItemHead'>" + (i + 1) + "</span>" + names[i] + "</a>";
});