遍历动态标记并使用jquery填充

到目前为止我有这个

<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>

$（文档）.ready（函数（）{
$（'ul'）.addClass（'navMenu'）；
$（'li'）.addClass（'todo'）.html（“”）；
$（'span.navItemHead'）。换行（“”）；
});

我有四个名字要放在名字标签Mary，Nick，Matt，Meg和span标签中的1,2,3,4中，所以最后的html应该是

 <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 name=['Mary'，…]；
$（'li'）.addClass（'todo'）.html（函数（i）{
返回“”；
});

var name=['Mary'，…]；
$（'li'）.addClass（'todo'）.html（函数（i）{
返回“”；
});

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