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。

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

3 个答案: