Javascript 使用jQuery遍历列表

我的列表结构如下所示：

<ul class="nav-list">
        <li class="nav-list-item first-stage">
          <a href="">
            <table>
                <tr>
                    <td class="first">Stuff</td>
                    <td class="second"><i class="fa fa-chevron-down"></i></td>
                </tr>
            </table>
          </a>
        </li>
    <ul class="inner-nav">
            <li class="nav-list-item second-stage selected">
              <a href="">
                <table>
                    <tr>
                        <td class="inner-first"><div class="icon icon-arrow-right"></div></td>
                        <td class="inner-second">Blaa</td>
                    </tr>
                </table>
               </a>
            </li>

---

我无法通过列表进行遍历。这应该是一个下拉列表。不要介意li周围的“a href”。

首先，您需要修改HTML以使其有效：

<ul class="nav-list">
    <li class="nav-list-item first-stage">
        <table>
            <tr>
                <td class="first">Stuff</td>
                <td class="second"><i class="fa fa-chevron-down"></i></td>
            </tr>
        </table>
        <ul class="inner-nav">
            <li class="nav-list-item second-stage selected">            
                <a href="">
                    <table>
                        <tr>
                            <td class="inner-first"><div class="icon icon-arrow-right"></div></td>
                            <td class="inner-second">Blaa</td>
                        </tr>
                    </table>
                </a>
            </li>
        </ul>
    </li>
</ul>

---

如果$（“.first stage”）。单击（函数（）{

…真的是这样。你的html似乎无效这是可怕的可怕的html，当你尝试遍历和操作它时，它会导致各种各样的问题。使用符合标准的html，你的Javascript生活会轻松10倍。我需要将表放在li中。你的

li

中的表很好，但是有

a

>而

ul

元素作为

ul

元素的直接子元素是不正确的。这是不正确的，但我的列表结构很长，并且它有多个内部ul。这一次显示了所有内部ul。我想“一个接一个”地打开它们。下面是一个小提琴示例。

<ul class="nav-list">
    <li class="nav-list-item first-stage">
        <table>
            <tr>
                <td class="first">Stuff</td>
                <td class="second"><i class="fa fa-chevron-down"></i></td>
            </tr>
        </table>
        <ul class="inner-nav">
            <li class="nav-list-item second-stage selected">            
                <a href="">
                    <table>
                        <tr>
                            <td class="inner-first"><div class="icon icon-arrow-right"></div></td>
                            <td class="inner-second">Blaa</td>
                        </tr>
                    </table>
                </a>
            </li>
        </ul>
    </li>
</ul>

$(".first-stage").click(function(e) {
    var $nextItem = $('ul', this);
    var $i = $('i', this);
    $nextItem.slideToggle(function() {
        $i.toggleClass('fa-chevron-down fa-chevron-up');
    });
});