0

これは、この質問に少し関連してい ます。.each（）が完了した後にjQuery関数を呼び出す

しかし、解決策は私にはまったくうまくいかないようです。

基本的に、いくつかの要素の幅を計算するJavaScriptがあります。

var totalWidth = 0;
$element.find('li').each(function () {
    totalWidth += $(this).width();
});

この後、幅を使用して別の要素を設定します。

$element.width(totalWidth);

デバッガーを接続すると機能しますが、実行しただけでは機能しません。完成する前に幅が設定されていると思います.each()。

この問題を修正するためにを使用してみ.promise()ましたが、違いがないようです。

var totalWidth = 0;
$element.find('li').each(function () {
    totalWidth += $(this).width();
});

$element.promise().done(function () {
    $element.width(totalWidth);
});

これが私のHTMLです

<div class="carousel">
        <ul>
            <li>
                <img src="/Images/Travel2New/Adverts/advertHolder_1.png" />
            </li>
            <li>
                <img src="/Images/Travel2New/Adverts/advertHolder_2.png" />
            </li>
            <li>
                <img src="/Images/Travel2New/Adverts/advertHolder_3.png" />
            </li>
            <li>
                <img src="/Images/Travel2New/Adverts/advertHolder_4.png" />
            </li>
            <li>
                <img src="/Images/Travel2New/Adverts/advertHolder_5.png" />
            </li>
        </ul>
    </div>

何か案は？

4

2 に答える 2

2

幅の計算はグラフィックがロードされるまで待機する必要があるため、次のことを試すことができます。

$(window).load(function () {
    var totalWidth = 0;

    $element.find('li').each(function () {
        totalWidth += $(this).width();
    });

    $element.width(totalWidth);
});

イベントの例の説明からload()、次のことがわかります。

グラフィックを含め、ページが完全に読み込まれたときに関数を実行します。

$(window).load(function () {
    // run code
});

現時点では、このload()イベントは非推奨になっているようです。そのため、利用するjQueryのバージョンを検討する必要があります。

于 2012-10-15T11:05:56.450 に答える
2

これは既知の問題です.each

あなたはこのようにすることができます

    var totalWidth = 0;

    var $elems = $element.find('li');

    (function fetch(i) {
        if(i >= $elems.length) return;  // no elems left

        var $elem = $elems.eq(i);
        totalWidth += $($elem).width(); 
        if(i+1==$elems.length) 
        {
         $element.width(totalWidth);
        }
        else
        {
         fetch(i + 1);  // next one
        }           
    })(0);  // start with first elem
于 2012-10-15T11:10:39.570 に答える