0

https://stackoverflow.com/a/3834694/721084に触発された簡単なブレッドクラムを書いています。これを達成しようとしている方法は、各アイテムをページごとに分類することです。以下のコードはそれを行うためのものですが、常に無限ループに陥ります。私は何を間違っていますか？

編集: JS コード全体への Pastebin リンクhttp://pastebin.com/nxUhQmqF

サンプル 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;
}
4

2 に答える 2

1

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;
}
于 2012-11-29T15:38:56.803 に答える
1

私はこのループを疑っていwhileます - そのような構造はしばしば無限ループの原因となります:

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

crumb.outerWidth()一貫して 0 を返す場合、終了することはありません。

于 2012-11-29T15:14:58.373 に答える