Question

我有这个HTML：

  <ul class="parent">
    <ul>
      <li>
        <ul></ul>
      </li>
      <li>
        <ul>
          <li>
            <ul></ul>
          </li>
        </ul>
      </li>
    </ul>
  </ul>

我需要为此标记中的所有嵌套列表添加计数类，以实现此目的：

  <ul class="parent">
    <ul class="level-1">
      <li>
        <ul class="level-2"></ul>
      </li>
      <li>
        <ul class="level-2">
          <li>
            <ul class="level-3"></ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="level-1">
      <li>
        <ul class="level-2"></ul>
      </li>
      <li>
        <ul class="level-2">
          <li>
            <ul class="level-3"></ul>
          </li>
        </ul>
      </li>
    </ul>
  </ul>

所以我这样做：

var parent_ul = $('.parent');

if (parent_ul.doesExist()){
    var parent_ul_lists = parent_ul.find('ul');

    parent_ul_lists.each(function(){
        var i;
        for (i = 0; i < parent_ul_lists.length; i++) {
            $(this).eq(i).addClass('level-' + i);
        }
    })
}

但是在输出中，我对所有父列表子项都有类测试level-1。有人可以帮忙吗？

Answer 1

试试这个

$('.parent ul').addClass(function(){
   return "level-"+$(this).parents('ul').length;
});

DEMO

Answer 2

试试这个

 var parent = $('.parent').children();
    next = parent;
    var i = 0;
    while (next.length) {
        parent = next;

        parent.addClass("Level_" + i);
        i++;
        next = next.children();
    }

Demo

Answer 3

你可以使用它;

var parent_ul = $('.parent');


var parent_ul_lists = parent_ul.find('ul');

parent_ul_lists.each(function(){
    $(this).addClass('level-'+ ($(this).parents().length -1)/2);

});

在此处查看工作演示： http://jsfiddle.net/huseyinbabal/qmGcC/

注意：检查输出中的元素以查看已分配的类

Answer 4

你需要一些好的'ole recursion！

查看此JSFiddle 更新：更正的jsFiddle链接

以下是代码：

function labelChildUL(element, count) {
    element.children().each(function (index, value) {
        var $me = $(value);
        if ($me.is("ul")) {
            $me.addClass("level-" + (count + 1));
            labelChildUL($me, count + 1);
        }
        else
        {
            labelChildUL($me, count);
        }
    });
}

$(document).ready(function () {
    var $parent = $('#parent');
    labelChildUL($parent, 0);
});

我还更新了您的html，使用id代替class代表“父母”：

<ul id='parent'>
...

使用jQuery为嵌套列表元素添加计数类

4 个答案: