js遞歸生成菜單的問題

數據結構大致如下：

data = [
{id: "1",pId: "0",name: "父級1",
children:[
    {id: "10", pId: "1", name: "子1",
    children:[
    {id: "101", pId: "10", name: "子1-1",children:[]},
    {id: "102", pId: "10", name: "子1-2",children:[
        {id: "1021", pId: "102", name: "子1-2-1",children:[]},
        {id: "1022", pId: "102", name: "子1-2-2",children:[]}
    ]}
    ]
    },
    {id: "12", pId: "1", name: "子2",children:[]},
    {id: "13", pId: "1", name: "子3",children:[]}
]
},
{id: "2",pId: "0",name: "父級2",
children:[
    {id: "20", pId: "2", name: "子1",children:[]},
    {id: "22", pId: "2", name: "子2",children:[]},
    {id: "23", pId: "2", name: "子3",children:[]},
    {id: "24", pId: "10", name: "子4",children:[
        {id: "241", pId: "24", name: "子4-1",children:[]},
        {id: "242", pId: "24", name: "子4-2",children:[
            {id: "2421", pId: "242", name: "子4-2-1",children:[]},
            {id: "2422", pId: "242", name: "子4-2-2",children:[]}
        ]}
    ]}
]
},
{id: "3",pId: "0",name: "父級3",
children:[
    {id: "30", pId: "3", name: "子1",children:[]},
    {id: "32", pId: "3", name: "子2",children:[]},
    {id: "33", pId: "3", name: "子3",children:[]},
    {id: "33", pId: "3", name: "子4",children:[]}
]
},
{id: "4",pId: "0",name: "父級4",
children:[
    {id: "40", pId: "4", name: "子1",children:[]},
    {id: "42", pId: "4", name: "子2",children:[]},
    {id: "43", pId: "4", name: "子3",children:[]}
]
}
]

想要生成的dom結構如下：

<ul id="tree-ul">
    <li><a href="#">父級1 <i class="iconfont icon-expand icon-arr-menu"></i></a>
        <ul>
            <li><a href="#">子1</a></li>
            <li><a href="#">子2 <i class="iconfont icon-expand icon-arr-menu"></i></a>
                <ul>
                    <li><a href="##">子2-1</a></li>
                    <li><a href="#">子2-2</a></li>
                    <li><a href="#">子2-3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">父級2 <i class="iconfont icon-expand icon-arr-menu"></i></a>
        <ul>
            <li><a href="##">子1</a></li>
            <li><a href="#">子2</a></li>
            <li><a href="#">子3</a><i class="iconfont icon-expand icon-arr-menu"></i>
                <ul>
                    <li><a href="##">子3-1</a></li>
                    <li><a href="#">子3-2</a></li>
                    <li><a href="#">子3-3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">父級3 <i class="iconfont icon-expand icon-arr-menu"></i></a>
        <ul>
            <li><a href="#">子1</a></li>
            <li><a href="#">子2</a></li>
            <li><a href="#">子3</a></li>
        </ul>
    </li>
</ul>

請問怎么用遞歸方式實現上面結構

自己寫的代碼有問題

function menuTree(menu, dt){
    for (var i = 0, len = dt.length; i < len; i++) {
        menu += '<li><a data-menuId="'+dt[i].id+'">'+dt[i].name+'<i class="iconfont icon-expand icon-arr-menu"></i></a>';
        if(dt[i].children){
            menu += '<ul>';
            menuTree(menu, dt[i].children);
            menu += '</ul>';
        }
        menu += '</li>';
    }
}
var menu = '';
menuTree(menu, data);
$('<ul></ul>').html(menu); // menu還是為空