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

Question

I have a nested list that resembles this:

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

This list is dynamically generated, and I need to auto increment ID's for each list item at each level.

Eg. Country li's would have #Lv1-1 , #Lv1-2, #Lv1-3 Region li's would have #Lv2-1 , #Lv2-2, #Lv2-3

Each level needs to start with at 0 or 1, and increment the id based on it's index in that specific ul.

This is my current code, I am unable to even get the first level working.

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

Your help is appreciated.

Thanks

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));
          });
      });
  });

Answer 2

here is a Recursive solution

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);
            }
        });
    }
}

demo: http://jsfiddle.net/3xpBw/1/

Answer 3

Another solution could be: Fiddle

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