javascript - jQuery .each() won't iterate independently -

i'm using following piece of jquery apply span styles currency symbol , decimals of bunch of monetary values.

$('td.pricebox').each(function() {     $(this).html('<span class="price_currency price_element">' + $(this).html().substr(0, 1) // styles currency unit     + "</span>" + $(this).html().substr(1, $(this).html().length-3) // leaves rounded value     + '<span class="price_cents price_element">'     + $(this).html().substr(-2)     + "</span>") // styles decimals }); 

this code works first value on page, e.g. "$180.65," copies value , replaces every value on page "$180.65".

what doing wrong? how can iterate independently each td.pricebox?

note: contents of td.pricebox generated dynamically , don't have access them. cannot write spans inline.

edit: had script designed remove decimal $('.bannercontent td').html($('.bannercontent td').html().replace(".",""));. targeted same td, didn't identify class. removed decimal, reason broke .each() method. why?

$('.bannercontent td').html($('.bannercontent td').html().replace(".","")); 

this code replacing tds html of first one. that's because while .html() setter function applies whole jquery set, getter runs on first. if place inside .each() , use $(this) should work:

$('td.pricebox').each(function() {     $(this).html($(this).html().replace(".",""));     $(this).html('<span class="price_currency price_element">' + $(this).html().substr(0, 1) // styles currency unit     + "</span>" + $(this).html().substr(1, $(this).html().length-3) // leaves rounded value     + '<span class="price_cents price_element">'     + $(this).html().substr(-2)     + "</span>") // styles decimals }); 

for more information on how works, see jquery .html() documentation.