如何以递归方式为列表中的每个项目分配唯一ID?

时间:2012-04-16 10:27:20

标签: jquery html recursion html-lists

我有以下列表。

<ol>
    <li>
        <a href="client.htm">Client</a>
        <ol>
            <li><a href="client/nokia.htm">Nokia</a></li>
            <li><a href="client/microsoft.htm">Microsoft</a></li>
            <li><a href="client/sony.htm">Sony</a></li>
            <li><a href="client/samsung.htm">Samsung</a></li>
        </ol>
    </li>
    <li><a href="contact.htm">Contact</a></li>
</ol>

我想转变成类似的东西。

<ol>
    <li>
        <a id="sitemap-item-1" href="client.htm">Client</a>
        <ol>
            <li><a id="sitemap-item-1-1" href="client/nokia.htm">Nokia</a></li>
            <li><a id="sitemap-item-1-2" href="client/microsoft.htm">Microsoft</a></li>
            <li><a id="sitemap-item-1-3" href="client/sony.htm">Sony</a></li>
            <li><a id="sitemap-item-1-4" href="client/samsung.htm">Samsung</a></li>
        </ol>
    </li>
    <li><a id="sitemap-item-2" href="contact.htm">Contact</a></li>
</ol>

请注意,该ID基于列表中项目的级别。

1 个答案:

答案 0 :(得分:4)

这样的作品:

​$(document).ready(function(){
    $("body > ol > li").each(function(idx){
        $(this).find("> a").attr("id","sitemap-item-"+ ++idx);
        $(this).find("> ol > li > a").each(function(idx2){
            $(this).attr("id","sitemap-item-"+ idx + "-" + ++idx2);            
        });            
    });
});​

http://jsfiddle.net/UvQmC/12/