每个()完成后的防火功能

时间:2012-10-15 11:03:08

标签: jquery

这与此问题略有关系 Invoking a jQuery function after .each() has completed

但解决方案似乎并不适合我。

基本上我有一些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>

有什么想法吗?

2 个答案:

答案 0 :(得分: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()事件似乎是deprecated,因此您应该考虑使用的jQuery版本。

答案 1 :(得分: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