javascript - Jquery - 嵌套列表的自动递增 ID

Question

我有一个类似于这样的嵌套列表:

<div id="treeview-left">
<ul>
   <li>Country
       <ul>
          <li>Region
             <ul>
              <li>District
                 <ul>
                    <li>Group
                       <ul>
                          <li>People</li>
                       </ul>
                    </li>
                  </ul>
              </li>
             </ul>
          </li>
        </ul>
    </li>
 </ul> 
 </div>

此列表是动态生成的，我需要为每个级别的每个列表项自动递增 ID。

例如。黎国会有#Lv1-1、#Lv1-2、#Lv1-3里区会有#Lv2-1、#Lv2-2、#Lv2-3

每个级别都需要从 0 或 1 开始，并根据其在特定 ul 中的索引递增 id。

这是我当前的代码，我什至无法让第一级工作。

<script>
                 $(function () {
                     $("#treeview-left > ul li").each(function () {
                         var TopPosition = $(this).index();
                         console.log(TopPosition);
                         $(this).id("Lvl1"+TopPosition);
                     });
                 });
            </script>

感谢您的帮助。

谢谢

Answer 1

• demo: https://so.lucafilosofi.com/jquery-auto-increment-ids-for-nested-list/

  $(function () {
      $("#treeview-left ul").each(function (i, item) {
          var Tp = i + 1;
          $(this).find('li').each(function (j, item) {
              $(this).attr('id', "Lvl" + Tp + '-' + (j + 1));
          });
      });
  });