Safari is returning incorrect width using jQuery

Question

Here is the problematic part of my jQuery

var tickerWidth = 0;
var padding = 10;
firstList.find('li').each(function() {

            $(this).append(' —');
            tickerWidth += $(this).width() + padding;  

           $('body').prepend($(this).width() + '<br />');

        });

firstList is a variable that holds an ul element. When I run this in Firefox, I correctly get the widths calculated and printed to my page. However, in Safari, I get the width much narrower - about the width it would be had the — not been inserted... is this some sort of race condition?

Is there any way to combat this? Perhaps loop through first and insert the html entity, and then loop through again to calculate width?

Thanks

EDIT

I did loop through first, insert the html entity, and then do another loop, but the values are still incorrect...

I've also tried outerWidth() but it hasn't helped.

Answer 1

Okay, I've got it to calculate it correctly, though it's a bit ugly.

Instead of append()ing the entity, I insert it like so

        $(this).html($(this).html() + ' —');

This works fine.