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。

EG。国家李将拥有＃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

演示： http://so.devilmaycode.it/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

另一种解决方案可能是：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>

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

3 个答案: