Unable to get javascript to make first letter of every word LARGER on my site to load properly I'm trying to use javascript to make the first letter of every word LARGER in titles with the class 'field-name-title' (so basically all nodes). 

I found a couple of Javascript-based solutions online, notably here and here. But whenever I try and implement them nothing happens (by which I mean the titles that are supposed to be changed are NOT). 

What's I've tried:

1) I replaced the boilerplate class name in the javascript linked to above with my class name (ir. replaced 'title-case' in the one with 'field-name-title', etc.). 

2) I've ensured I have a first-letter class in my stylesheet with the following property:

.first-letter {
  font-size: 1.4em; // I also tried % such as 115%
}


3) I put my javascript file in js/first-letter.js. I referenced it in my .info file as 'scripts[] = js/first-letter.js.

4) I've flushed caches repeatedly (and besides aggregation is turned off).

What am I missing?
If Alireza's answer doesn't work, try this one.

js/first-letter.js

(function ($) {
 $( document ).ready(function() {
  $('.field-name-title').html(function(i,el) {
    return el.replace(/\b([A-Z])/g, "&lt;span class=\"first-letter\"&gt;$1&lt;/span&gt;");
     });
  });
}(jQuery));