changing font size of first letter of each word with javascript append issue

Question

I have this js that is adjusting the size of the first letter of each word in my headers. The only prob is that it appends all the results to each header. So each header on the page, becomes a combo of every header on the page. This jsfiddle link makes what Im saying much more clear:

http://jsfiddle.net/GKYuG/

Can someone please let me know how I can get the correct result?

Answer 1

Try this:

$(document).ready(function() { 

    var titles = new Array();
    titles[0] = 'latest_news';
    titles[1] = 'contact_me';

    $('.title').each(function(){
        var words = $(this).text().split(' '); 
        var html = ''; 
        $.each(words, function() { 
            html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' '; 
        }); 
        $(this).html(html); 
    });

}); 

You have to iterate through the selected divs, otherwise you are applying your changes to all the divs selected by the selector.