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

Question

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

我有一个简单的 Accordion 菜单，我在其中为每个单独的列表项添加过渡延迟内联样式。我遇到的问题是我不确定如何遍历每组 parent 的列表项。

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

<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

这是我的方法:

$('.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 .