Fire function after each() has completed

Question

this is slightly related to this question Invoking a jQuery function after .each() has completed

But the solution doesn't quite seem to work for me.

Basically I have piece of JavaScript that calculates the width of some elements:

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

After this I want to then use the width to set another element:

$element.width(totalWidth);

If I attach the debugger it works but if I just run it it doesn't. Which makes me think that the width is being set before the .each() completes.

I tried using .promise() to fix this issue but it doesn't appear to make a difference.

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

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

Here's my 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>

Any ideas?

VisioN · Accepted Answer · 2012-10-15T11:19:52.937

2

Since your width calculation should wait until the graphics is loaded then you can try the following:

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

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

    $element.width(totalWidth);
});

From load() event example description we can see:

Run a function when the page is fully loaded including graphics.
$(window).load(function () {
    // run code
});

Note that at the moment the load() event seems to be deprecated, so you should consider the version of jQuery you exploit.

edited Oct 15 '12 at 11:19

answered Oct 15 '12 at 11:05

VisioN

143,310
32
282
281

load() event is deprecated.So do not suggest – StaticVariable Oct 15 '12 at 11:11
3

@jhonraymos OK. Any ideas how to replace it? – VisioN Oct 15 '12 at 11:12
2

http://blog.gabrieleromanato.com/2012/10/jquery-the-load-event-has-been-deprecated-now-what/ – chridam Oct 15 '12 at 11:13

score 2 · Answer 2 · answered Oct 15 '12 at 11:10

well this is the known problem with .each

you can do it like this

    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

Fire function after each() has completed

2 Answers2

Linked