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。

例如。 國家 li 有 #Lv1-1 , #Lv1-2, #Lv1-3 地區 li 有 #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

• 演示： 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));
          });
      });
  });

Answer 2

這是一個遞歸解決方案

function updateIds($node, index) {
    if ($node.is('ul')) {
        updateIds($node.children(), index);
    } else {
        $node.each(function (i, el) {
            $(el).attr('id', 'Lv' + index + '-' + (i+1));

            var $child = $node.children('ul');
            if ($child.length > 0) {
                updateIds($child, index+1);
            }
        });
    }
}

演示： http : //jsfiddle.net/3xpBw/1/

Answer 3

另一種解決方案可能是：小提琴

<script type="text/javascript">
$(function () {
      var count=0
      $('ul').each(function(i, ul) {
          count++
          ul = $(ul);
          var first=count
          ul.children('li').each(function(i, li) {
              li = $(li);
              var second = first + '.' + (li.index() + 1);
              li.prepend('<span>' + second + '</span>');
              li.attr('id',second)
              }) 
          })

 });
 </script>