如何遍历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');
  });
});

但是在这种用例中（可以减小列表的大小），您可以并且应该使用CSS， 例如this 。