I want to style any dollar signs $ on my website by wrapping them in a span element. I tried using code that worked for ampersands, but it's not working correctly with dollar signs. Instead of styling the dollar sign inside the paragraph tag, it adds the styling right before the closing
What am I missing here? I've attempted using both the $ symbol and $, but neither are producing the desired results. The dollar sign remains untouched within the
tags.
JSFiddle: https://jsfiddle.net/tk8og3Ln/
HTML:
<p>Cabana Tanning Lotion: $32.00</p>
jQuery:
(function($) {
$.fn.money = function() {
return this.each(function() {
var element = $(this);
var html = element.html();
element.html(html.replace(/$/gi, '<span class="money">$</span>'));
});
};
})(jQuery);
$('p').money();
CSS:
.money {
font: italic 1.3em Baskerville, Georgia, serif;
color: #666;
padding-right: 5px;
}