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

Question

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

• 首先ul应该有id="u1"

• ul 里面应该有 id="u1l3-u1"

• 接下来ul应该有id="u1l3-u2"

• li 里面应该有 id="u1l3-u2l1"

• 接下来li应该有id="u1l3-u2l2"

• 等等...

• 第一li内ul应该有id="u1l1"

• 接下来的li内ul应id="u1l2"

• 接下来的li内ul应id="u1l3"

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

例如下面的代码：

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

Answer 1

你可以试试这个功能addIdPartial('', $('#listz'));function addIdPartial(id, li) {&nbsp; if ($(li).find('> ul > li').length) {&nbsp; &nbsp; $(li).find('> ul > li').each(function(i, v) {&nbsp; &nbsp; &nbsp; pid = id + '-u1'&nbsp; &nbsp; &nbsp; if(id == '') pid = 'u1';&nbsp; &nbsp; &nbsp; $(this).parent().attr('id', pid);&nbsp; &nbsp; &nbsp; var lid = pid + 'l' + (i+1);&nbsp; &nbsp; &nbsp; $(this).attr('id', lid);&nbsp; &nbsp; &nbsp; addIdPartial(lid, this);&nbsp; &nbsp; })&nbsp; }}ul:before, li:before {&nbsp;content: attr(id);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="listz">&nbsp; <ul>&nbsp; &nbsp; <li><span>Colors</span>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><span>Primary Colors</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Yellow</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Red</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Red</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Fire Brick</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Salmon</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Dark Salmon</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Light Salmon</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Salmon</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Coral</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Crimson</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Blue</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Secondary Colors</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Orange</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Green</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Purple</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Earth Colors</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>White</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Black</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Gray</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li><span>Stationary</span>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Books&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ruled Books</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Unruled Books</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Graph Books</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Cartesian Graphs</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Isometric Graphs</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Logarithmic Graphs</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>Pens</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ball Pens</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Fountain Pens</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Eraser</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Paper Weight</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>Furniture</li>&nbsp; &nbsp; &nbsp; <li>foo</li>&nbsp; &nbsp; &nbsp; <li>bar</li>&nbsp; &nbsp; &nbsp; <li>foo fighters</li>&nbsp; </ul></div>