javascript嵌套循环变量范围问题

我正在写一个简单的面包屑，灵感来自于。我是如何做到这一点的，是通过按页面对每个项目进行分类。下面的代码就是这样做的，但它总是以无限循环结束。我做错了什么

编辑：粘贴指向整个JS代码的链接

示例DOM：

<ul id="progress_bar" class="nostyle clearfix">
    <li class="first"><a href="">Blah</a></li>
    <li class=""><a href="">Blah</a></li>
    <li class="selected"><a href="">Blah</a></li>
    <li class="last"><a href="">Blah</a></li>
</ul>

JS代码：

    function classifyPages(bcParent, totalItems) {
    var pages       = 1,
        wd          = 0,
        parentWd    = findWidthOfParent(bcParent),
        crumbs      = bcParent.find('li'),
        i           = 0;

    for( i = 0; i < totalItems; i++) {
        wd = 0;
        while(wd < parentWd) {
            crumb = crumbs.eq(i);
            wd += crumb.outerWidth();
            if( wd < parentWd) {
                i += 1;
                crumb.addClass( 'bcPage-' + pages);
            }
        }

        pages += 1;
    }

    return pages;
}

函数分类页面（bcParent，totalItems）{
变量页=1，
wd=0，
parentWd=findWidthofpparent（bcParent），
crumbs=bcParent.find（'li'），
i=0；
对于（i=0；i

我怀疑这是

，而

循环-这样的结构常常是无限循环的来源：

 while(wd < parentWd) {
            crumb = crumbs.eq(i);
            wd += crumb.outerWidth();
            // snip

while（wd

---

如果

crumb.outerWidth（）

始终返回0，它将永远不会结束。

您的

i

（在内部循环中也会递增）将在某个时间运行在

totalItems

之上。不存在的

crumb

则始终具有

outerWidth

的

值，您将被捕获（如@Oleg V.Volkov所述）

这应该起作用：

function classifyPages(bcParent, totalItems) {
    var pages       = 1,
        parentWd    = findWidthOfParent(bcParent),
        crumbs      = bcParent.find('li');

    for (var i = 0; i < totalItems; i++) {
        for (var wd = 0; wd < parentWd && i < totalItems; ) {
//                                     ^^^^^^^^^^^^^^^^^
            var crumb = crumbs.eq(i);
            wd += crumb.outerWidth();
            if( wd < parentWd) {
                i += 1;
                crumb.addClass( 'bcPage-' + pages);
            }
        }
        pages += 1;
    }
    return pages;
}

函数分类页面（bcParent，totalItems）{
变量页=1，
parentWd=findWidthofpparent（bcParent），
crumbs=bcParent.find（'li'）；
对于（变量i=0；i

更好：

function classifyPages(bcParent, totalItems) {
    var pages       = 1,
        parentWd    = findWidthOfParent(bcParent),
        crumbs      = bcParent.find('li'),
        wd          = 0;

    for (var i = 0; i < totalItems; i++) {
        var crumb = crumbs.eq(i);
        wd += crumb.outerWidth();
        if( wd >= parentWd) {
            pages += 1;
            wd = 0; // reset
        }
        crumb.addClass( 'bcPage-' + pages);
    }
    return pages;
}

函数分类页面（bcParent，totalItems）{
变量页=1，
parentWd=findWidthofpparent（bcParent），
crumbs=bcParent.find（'li'），
wd=0；
对于（变量i=0；i=parentWd）{
页数+=1；
wd=0；//重置
}
gramb.addClass（'bcPage-'+页）；
}
返回页面；
}
你能给我们展示一个（最小的）DOM示例以及如何调用该函数吗？还有，
findWidthOfParent
返回什么？你能给我们展示一些html，以及如何调用该函数吗？你确定crumb.outerWidth返回一个有效的数字吗？如果不是，它可以进入无限循环。@Bergi：用链接和DOM更新了我的问题