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

Question

I have this HTML:

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

I need to add count classes for all nested lists in this markup, to reach this:

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

So i do this:

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

But in output i have class test level-1 for all of parent list childrens. Can anybody help?

Answer 1

Try this

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

DEMO

Answer 2

Try this

 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

You can use this;

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

});

See working demo here: http://jsfiddle.net/huseyinbabal/qmGcC/

Note: Inspect element in output to see class assigned

Answer 4

You need some good 'ole recursion!

Check out this JSFiddle UPDATE: corrected jsFiddle link

Here is the code:

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

I also updated your html to use id instead of class for "parent":

<ul id='parent'>
...