jquery - 如何在 jQuery 中获取 ul 列表中父子关系的树结构？

Question

之前

<ul>
<li parent-id="0" li-id="16">Anthropology Department</li>
<li parent-id="16" li-id="18">Anthropology Faculty Collections</li>
<li parent-id="16" li-id="23">Shared Collections</li>
<li parent-id="0" li-id="19">Center for Research on Vermont</li>
<li parent-id="19" li-id="24">Collections for Testing</li>
<li parent-id="24" li-id="25">Geology Department</li>

//我想要这样之后

<ul>
<li parent-id="0" li-id="16">Anthropology Department
    <ul>
        <li parent-id="16" li-id="18">Anthropology Faculty Collections</li>
        <li parent-id="16" li-id="23">Shared Collections</li>
    </ul>
</li>
<li parent-id="0" li-id="19">Center for Research on Vermont
    <ul>
        <li parent-id="19" li-id="24">Collections for Testing
            <ul>
               <li parent-id="24" li-id="25">Geology Department
                </li> 
            </ul>
        </li>
    </ul>
</li>

我想将 li-id 与parent-id 进行匹配，然后如果匹配的parent-id 列表应附加到li-id 列表中。

到目前为止我已经尝试过:

var liid = $('li').attr('li-id');
var parid = $('li').attr('parent-id');
if(liid==parid){
parid.appendTo(liid)
}

Answer 1

尝试

jQuery(function($){
    var $ul = $('ul');
    $ul.find('li[parent-id]').each(function () {
        $ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this)
    });
})

演示:Fiddle