проблем с обхвата на променливата на вложен цикъл на javascript

Пиша прост навигационен път, вдъхновен от https://stackoverflow.com/a/3834694/721084. Как се опитвам да постигна това е като класифицирам всеки елемент по страницата, на която ще бъде. Кодът по-долу е предназначен да направи това, но винаги завършва в безкраен цикъл. какво правя грешно

РЕДАКТИРАНЕ: Връзка към Pastebin към целия JS код http://pastebin.com/nxUhQmqF

Примерен DOM:

<ul id="progress_bar" class="nostyle clearfix">
    <li class="first"><a href="/bg">Blah</a></li>
    <li class=""><a href="/bg">Blah</a></li>
    <li class="selected"><a href="/bg">Blah</a></li>
    <li class="last"><a href="/bg">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;
}

javascript jquery breadcrumbs
person Aakash Goel    schedule 29.11.2012    source източник
comment
Бихте ли ни показали (минимален) примерен DOM и как извиквате тази функция? Също така, какво връща findWidthOfParent?   -  person Bergi    schedule 29.11.2012
comment
Можете ли да ни покажете малко html и как извиквате тази функция?   -  person Cerbrus    schedule 29.11.2012
comment
сигурни ли сте, че crumb.outerWidth връща валидно число? Ако не, може да влезе в безкраен цикъл.   -  person BuddhiP    schedule 29.11.2012
comment
@Bergi: актуализира моя въпрос с връзки и DOM   -  person Aakash Goel    schedule 29.11.2012

Отговори (2)


arrow_upward
1
arrow_downward

Вашият i, който също се увеличава във вътрешния цикъл, ще работи над totalItems по някое време. Тогава несъществуващото crumb винаги има outerWidth от 0 и вие сте хванати (както @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;
}

По-добре:

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;
}
person Bergi    schedule 29.11.2012

arrow_upward
1
arrow_downward

Подозирам, че този while цикъл - подобни конструкции често са източник на безкрайни цикли:

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

Ако crumb.outerWidth() постоянно връща 0, то никога няма да свърши.

person Oleg V. Volkov    schedule 29.11.2012