如何根据列表中的深度使用 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) {

  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>