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是undefined。 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>

因为你在ul找到所有nav而不管j的值是什么，所以你似乎无法行动。您将需要一种不同的方法。我的解决方案是将选择器修改为字符串变量。基本上我们会发现第一个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

Answer 2

这就是你想要的吗

$(function(){
  $('.items ul').each(function(k,v){
     $(this).addClass('tier' + k + '-items');
     $(this).prepend('<strong>Tier' + k + '-items</strong>'); // just to highlight
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="items">
    <ul >
        <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>

用于循环闭合

2 个答案: