如何根据列表中的深度使用 jQuery 将 id 标签递归添加到 ul 和 li 元素？

Question

如何根据父列表中的深度/级别在所有ul li元素中赋予唯一的 id 属性并反映相同的属性。

• 第一个ul应该有id="u1"
  • ul中的第一个li应该有id="u1l1"
  • ul中的下一个li应该有id="u1l2"
  • ul中的下一个li应该有id="u1l3"
    • 里面的ul应该有id="u1l3-u1"
    • 里面的下一个ul应该有id="u1l3-u2"
      • li里面应该有id="u1l3-u2l1"
      • 下一个li应该有id="u1l3-u2l2"
      • 等等...

为了让事情更清楚，这是我使用电子表格程序生成的示例代码......

例如下面的代码：

<div id="listz">
<ul>
    <li><span>Colors</span>
        <ul>
            <li><span>Primary Colors</span>
                <ul>
                    <li>Yellow</li>
                    <li><span>Red</span>
                        <ul>
                            <li>Red</li>
                            <li>Fire Brick</li>
                            <li><span>Salmon</span>
                                <ul>
                                    <li>Dark Salmon</li>
                                    <li>Light Salmon</li>
                                    <li>Salmon</li>
                                </ul>
                            </li>
                            <li>Coral</li>
                            <li>Crimson</li>
                        </ul>
                    </li>
                    <li>Blue</li>
                </ul>
            <li><span>Secondary Colors</span>
                <ul>
                    <li>Orange</li>
                    <li>Green</li>
                    <li>Purple</li>
                </ul>
            </li>
            <li><span>Earth Colors</span>
                <ul>
                    <li>White</li>
                    <li>Black</li>
                    <li>Gray</li>
                </ul>
            </li>
        </ul>
    </li>
    <li><span>Stationary</span>
        <ul>
            <li>Books
                <ul>
                    <li>Ruled Books</li>
                    <li>Unruled Books</li>
                    <li><span>Graph Books</span>
                        <ul>
                            <li>Cartesian Graphs</li>
                            <li>Isometric Graphs</li>
                            <li>Logarithmic Graphs</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><span>Pens</span>
                <ul>
                    <li>Ball Pens</li>
                    <li>Fountain Pens</li>
                </ul>
            </li>
            <li>Eraser</li>
            <li>Paper Weight</li>
        </ul>
    </li>
    <li>Furniture</li>
    <li>foo</li>
    <li>bar</li>
    <li>foo fighters</li>
</ul>

应该变成：

<div id="listz">
<ul id="u1">
<li id="u1l1"><span>Stationary</span>
    <ul id="u1l1-u1">
        <li id="u1l1-u1l1">Books
            <ul id="u1l1-u1l1-u1">
                <li id="u1l1-u1l1-u1l1">Ruled Books</li>
                <li id="u1l1-u1l1-u1l2">Unruled Books</li>
                <li id="u1l1-u1l1-u1l3"><span>Graph Books</span>
                    <ul id="u1l1-u1l1-u1l3-u1">
                        <li id="u1l1-u1l1-u1l3-u1l1">Cartesian Graphs</li>
                        <li id="u1l1-u1l1-u1l3-u1l2">Isometric Graphs</li>
                        <li id="u1l1-u1l1-u1l3-u1l3">Logarithmic Graphs</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="u1l1-u1l2"><span>Pens</span>
            <ul id="u1l1-u1l2-u1">
                <li id="u1l1-u1l2-u1l1">Ball Pens</li>
                <li id="u1l1-u1l2-u1l2">Fountain Pens</li>
            </ul>
        </li>
        <li id="u1l1-u1l3">Eraser</li>
        <li id="u1l1-u1l4">Paper Weight</li>
    </ul>
</li>
<li id="u1l2">Furniture</li>
<li id="u1l3"><span>Colors</span>
    <ul id="u1l3-u1">
        <li id="u1l3-u1l1"><span>Primary Colors</span>
            <ul id="u1l3-u1l1-u1">
                <li id="u1l3-u1l1-u1l1">Yellow</li>
                <li id="u1l3-u1l1-u1l2"><span>Red</span>
                    <ul id="u1l3-u1l1-u1l2-u1">
                        <li id="u1l3-u1l1-u1l2-u1l1">Red</li>
                        <li id="u1l3-u1l1-u1l2-u1l2">Fire Brick</li>
                        <li id="u1l3-u1l1-u1l2-u1l3"><span>Salmon</span>
                            <ul id="u1l3-u1l1-u1l2-u1l3-u1">
                                <li id="u1l3-u1l1-u1l2-u1l3-u1l1">Dark Salmon</li>
                                <li id="u1l3-u1l1-u1l2-u1l3-u1l2">Light Salmon</li>
                                <li id="u1l3-u1l1-u1l2-u1l3-u1l3">Salmon</li>
                            </ul>
                        </li>
                        <li id="u1l3-u1l1-u1l2-u1l4">Coral</li>
                        <li id="u1l3-u1l1-u1l2-u1l5">Crimson</li>
                    </ul>
                </li>
                <li id="u1l3-u1l1-u1l3">Blue</li>
            </ul>
        <li id="u1l3-u1l2"><span>Secondary Colors</span>
            <ul id="u1l3-u1l2-u1">
                <li id="u1l3-u1l2-u1l1">Orange</li>
                <li id="u1l3-u1l2-u1l2">Green</li>
                <li id="u1l3-u1l2-u1l3">Purple</li>
            </ul>
        </li>
        <li id="u1l3-u1l3"><span>Earth Colors</span>
            <ul id="u1l3-u1l3-u1">
                <li id="u1l3-u1l3-u1l1">White</li>
                <li id="u1l3-u1l3-u1l2">Black</li>
                <li id="u1l3-u1l3-u1l3">Gray</li>
            </ul>
        </li>
    </ul>
</li>
<li id="u1l4">foo</li>
<li id="u1l3">bar</li>
<li>foo fighters</li>

这是我尝试过的：

 $("ul").each(function (i) { $(this).attr("id","u"+(i+1)); $(this).prepend("<span>u"+(i+1)+"</span>"); $("li", this).each(function (j) { $(this).attr("id","l"+(j+1)); $(this).prepend("<span>l"+(j+1)+"</span>"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="listz"> <ul> <li><span>Colors</span> <ul> <li><span>Primary Colors</span> <ul> <li>Yellow</li> <li><span>Red</span> <ul> <li>Red</li> <li>Fire Brick</li> <li><span>Salmon</span> <ul> <li>Dark Salmon</li> <li>Light Salmon</li> <li>Salmon</li> </ul> </li> <li>Coral</li> <li>Crimson</li> </ul> </li> <li>Blue</li> </ul> <li><span>Secondary Colors</span> <ul> <li>Orange</li> <li>Green</li> <li>Purple</li> </ul> </li> <li><span>Earth Colors</span> <ul> <li>White</li> <li>Black</li> <li>Gray</li> </ul> </li> </ul> </li> <li><span>Stationary</span> <ul> <li>Books <ul> <li>Ruled Books</li> <li>Unruled Books</li> <li><span>Graph Books</span> <ul> <li>Cartesian Graphs</li> <li>Isometric Graphs</li> <li>Logarithmic Graphs</li> </ul> </li> </ul> </li> <li><span>Pens</span> <ul> <li>Ball Pens</li> <li>Fountain Pens</li> </ul> </li> <li>Eraser</li> <li>Paper Weight</li> </ul> </li> <li>Furniture</li> <li>foo</li> <li>bar</li> <li>foo fighters</li> </ul> </div>

Answer 1

你可以试试这个 function

 addIdPartial('', $('#listz')); function addIdPartial(id, li) { if ($(li).find('> ul > li').length) { $(li).find('> ul > li').each(function(i, v) { pid = id + '-u1' if(id == '') pid = 'u1'; $(this).parent().attr('id', pid); var lid = pid + 'l' + (i+1); $(this).attr('id', lid); addIdPartial(lid, this); }) } }

 ul:before, li:before { content: attr(id); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="listz"> <ul> <li><span>Colors</span> <ul> <li><span>Primary Colors</span> <ul> <li>Yellow</li> <li><span>Red</span> <ul> <li>Red</li> <li>Fire Brick</li> <li><span>Salmon</span> <ul> <li>Dark Salmon</li> <li>Light Salmon</li> <li>Salmon</li> </ul> </li> <li>Coral</li> <li>Crimson</li> </ul> </li> <li>Blue</li> </ul> <li><span>Secondary Colors</span> <ul> <li>Orange</li> <li>Green</li> <li>Purple</li> </ul> </li> <li><span>Earth Colors</span> <ul> <li>White</li> <li>Black</li> <li>Gray</li> </ul> </li> </ul> </li> <li><span>Stationary</span> <ul> <li>Books <ul> <li>Ruled Books</li> <li>Unruled Books</li> <li><span>Graph Books</span> <ul> <li>Cartesian Graphs</li> <li>Isometric Graphs</li> <li>Logarithmic Graphs</li> </ul> </li> </ul> </li> <li><span>Pens</span> <ul> <li>Ball Pens</li> <li>Fountain Pens</li> </ul> </li> <li>Eraser</li> <li>Paper Weight</li> </ul> </li> <li>Furniture</li> <li>foo</li> <li>bar</li> <li>foo fighters</li> </ul> </div>