javascript - 对于循环闭合

Question

我希望有人能帮我解释一下我的代码没有输出我所期望的内容。我已经玩过这个，但仍然无法弄清楚为什么内部闭包没有输出任何内容。

for (var i = 1, len = $('.items').length + 1; i < len; i = i + 1) {
    var j = (function(i) {
        for (j = 0; j < i.length; j = j + 1) {
            $('nav').find('ul').addClass('tier' + j + '-items');
        }
    })(i);
}

这是 HTML

<nav>
    <ul class="items">
        <li class="item">Top level 1</li>
        <li class="item">Top level 1
            <ul>
                <li class="item">level 2</li>
                <li class="item">level 2</li>
                <li class="item">level 2
                    <ul>
                        <li class="item">level 3</li>
                        <li class="item">level 3</li>
                        <li class="item">level 3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="item">Top level 1</li>
    </ul>
</nav>

编辑

我更新了希望这能起作用，但没有运气:

for (var i = 0, len = $('.items').length; i < len; i = i + 1) {
    (function(j) {
        for (var j = 0; j < i; j = j + 1) {
            $('nav').find('ul').addClass('tier' + j + '-items');
        }
    })(i);
}

编辑2:抱歉，不清楚我想做什么。斯宾塞几次后就明白了，我很感谢你的帮助。感谢您的帮助。

Answer 1

那是因为 i.length 是未定义。 i 是一个数字，它没有 .length 属性。这将使内部循环永远不会运行。

编辑:

我假设您想要添加类'tierN-items'，其中N是列表作为树的深度。所以你的输出看起来像这样:

<nav>
    <ul class="items tier1-items">
        <li class="item">Top level 1</li>
        <li class="item">Top level 1
            <ul class= "tier2-items">
                <li class="item">level 2</li>
                <li class="item">level 2</li>
                <li class="item">level 2
                    <ul class= "tier3-items">
                        <li class="item">level 3</li>
                        <li class="item">level 3</li>
                        <li class="item">level 3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="item">Top level 1</li>
    </ul>
</nav>

为此，您似乎所做的事情不会起作用，因为无论 j 的值如何，您都会在 nav 中找到所有 ul.您将需要一种不同的方法。我的解决方案是将选择器修改为字符串变量。基本上，我们查找第一个 ul 是否存在，然后查找是否存在 ul > li > ul，然后 ul > li > ul > li > ul，依此类推，直到不存在这样的元素。代码如下所示:

var level = 1;
var tierSearch = "nav > ul";
while($(tierSearch).length)
{
    $(tierSearch).addClass('tier' + level + '-items');
    level++;
    tierSearch += "> li > ul";
}

Fiddle Example