javascript - 使用 jquery 构建元素层次结构

Question

我需要为每个 ul 设置深度。我愿意

$('.topnav').find('ul').each(function(){
    $(this).attr('deep', $(this).index());
})

html

<ul class="topnav dropdown" >
    <li class="expand">
        <a href="/posluhy">Top</a>
        <ul class="subnav">
            <li class="expand">
                <a href="/posluhy/metalocherepycja">Sub cat 1</a>
                <ul class="subnav">
                    <li >
                        <a href="/posluhy/metalocherepycja/dsafsadf">Sub Sub cat 1</a>
                    </li>
                </ul>
            </li>
            <li class="expand">
                <a href="/posluhy/metalocherepycja">Sub cat 2</a>
                <ul class="subnav">
                    <li >
                        <a href="/posluhy/metalocherepycja/dsafsadf">Sub Sub cat 2</a>
                    </li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

但这会使每个 ul 的 deep='1'。我想得到类似的东西

1
  2
1
  2

jquery 可以吗？ fiddle 在这里 http://jsfiddle.net/GLjZt/1/

Answer 1

索引不会给你想要的，因为它只会告诉你元素在给定元素集中的位置； $(this).index() 将始终返回 0。您需要根据父 ul 的计算深度:

$('.topnav').find('ul').each(function(){
    $(this).attr('deep', $(this).parents('ul').length);//set attr deep
})