如何遍历jquery中的每个父列表项？

Question

我刚开始使用 jQuery，在遍历每个父 UL 的列表项时遇到了一些麻烦。

我有一个简单的手风琴菜单，我正在向每个单独的列表项添加转换延迟内联样式。我遇到的问题是我不确定如何遍历每组父列表项。

以下是每个列表项上发生的情况的示例。

<ul class="sub-menu">
    <li style="transition-delay: 0ms;></li>
    <li style="transition-delay: 25ms;>
        <ul class="sub-menu">
            <li style="transition-delay: 50ms;>
            <li style="transition-delay: 75ms;>
            <li style="transition-delay: 100ms;>
        </ul>
    </li>
    <li style="transition-delay: 125ms;></li>
    <li style="transition-delay: 150ms;></li>
    <li style="transition-delay: 175ms;></li>
</ul>

这就是我想要实现的目标：

<ul class="sub-menu">
    <li style="transition-delay: 0ms;></li>
    <li style="transition-delay: 25ms;>
        <ul class="sub-menu">
            <li style="transition-delay: 0ms;>
            <li style="transition-delay: 25ms;>
            <li style="transition-delay: 50ms;>
        </ul>
    </li>
    <li style="transition-delay: 50ms;></li>
    <li style="transition-delay: 75ms;></li>
    <li style="transition-delay: 100ms;></li>
</ul>

这就是我的 jQuery 的样子：

$('ul.mobile-menu li.menu-item-has-children ul.sub-menu li').each(function(i){
    $(this).css({ 'transition-delay': (i*25)+"ms" });
});

任何帮助将不胜感激，因为我刚刚开始使用 jQuery。我创建了一个 codepen，因此您可以看到正在运行的菜单并直观地看到问题。

http://codepen.io/creativenauts/pen/wGLqPg

Answer 1

您可以使用.index()，它给出了一个元素在其兄弟元素中的位置：

$('ul.mobile-menu li.menu-item-has-children ul.sub-menu li').each(function(){
    $(this).css({ 'transition-delay': ($(this).index()*25)+"ms" });
});

Answer 2

像这样：

$('ul.mobile-menu li.menu-item-has-children ul.sub-menu').each(function(j, subMenu){
    $(subMenu).children('li').each(function(i, li){ 
        $(li).css('transition-delay', (i*25)+'ms') 
    })
});

Answer 3

这是我的方法：

$('.sub-menu').each(function() {
  // $(this) = single ul element
  $(this).children('li').each(function(idx, el){
    // idx = index of current list [0 ... number]
    // $(el) = single li element
    $(el).css('transition-delay', (idx * 25) + 'ms');
  });
});

但在这个用例中（w.r.t. 列表的大小）您可以而且应该使用 CSS，something like this。