javascript nested loop variable scope issue

Question

I am writing a simple breadcrumb inspired by https://stackoverflow.com/a/3834694/721084. How I am trying to achieve this is by classifying each item by the page it would be on. The code below is meant to do that but it always ends up in an infinite loop. What am I doing wrong?

EDIT: Pastebin link to entire JS code http://pastebin.com/nxUhQmqF

Sample 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 Code:

    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;
}

Could you show us a (minimal) example DOM and how you invoke that function? Also, what does `findWidthOfParent` return? — Bergi, Nov 29 '12 at 15:13
Can you show us some html, and how you're calling this function? — Cerbrus, Nov 29 '12 at 15:14
are you sure crumb.outerWidth returns a valid number? If not it can go in to infinite loop. — BuddhiP, Nov 29 '12 at 15:17

score 1 · Answer 1 · answered Nov 29 '12 at 15:14

I suspect this while loop - such constructions often happen to be source of infinite loops:

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

If crumb.outerWidth() consistently returns 0, it will never end.

score 1 · Accepted Answer · answered Nov 29 '12 at 15:38

Your i, which is also incremented in the inner loop, will run above totalItems at some time. The non-existing crumb then has a outerWidth of 0 always, and you're caught (as @Oleg V. Volkov described).

This should work:

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;
}

Better:

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;
}

javascript nested loop variable scope issue

2 Answers2