Truncating jQuery function
I wrote the following functions to remove non-breaking spaces from html code on a SharePoint site (a SharePoint developer puts any code you write with non-breaking spaces whenever you open the master page or page layouts! All your time goes back and removes them) ...
Seems too long anyway, I'm pretty new to jQuery and wondering if there is a cleaner way to accomplish the same task.
<script type="text/javascript">
$(function(){
$('h1').each( function() {
var $h = $(this);
var html = $h.html();
html = html.replace( ' ', '' );
$h.html( html );
});
});
$(function(){
$('h2').each( function() {
var $h = $(this);
var html = $h.html();
html = html.replace( ' ', '' );
$h.html( html );
});
});
$(function(){
$('h3').each( function() {
var $h = $(this);
var html = $h.html();
html = html.replace( ' ', '' );
$h.html( html );
});
});
$(function(){
$('h4').each( function() {
var $h = $(this);
var html = $h.html();
html = html.replace( ' ', '' );
$h.html( html );
});
});
$(function(){
$('p').each( function() {
var $h = $(this);
var html = $h.html();
html = html.replace( ' ', '' );
$h.html( html );
});
});
</script>
source to share
You can combine all of them into one $(function() { ... });
. There are not many reasons why you should wrap each of these calls in your own document's event handler.
Also, you call the same function on many elements, you can combine your selectors with ,
, which results in the much shorter $('h2,h3,h4,h5').each(function() {....});
one suggested by others.
Reducing the function body:
var html = $h.html();
html = html.replace(' ', '');
can be done in one line with:
var html = $h.html().replace(' ', '');
and since you only reference it long enough to call another function - it doesn't even need to be stored in its own variable:
$h.html($h.html().replace(' ', ''));
Or if you are using jQuery> 1.4 use the new function syntax:
$h.html(function(index, oldHtml) { return oldHtml.replace(' ', ''); });
Of course your multi-line method gives you more places to enter your debug code if needed, I usually compress this thing manually after verifying that it works.
Plugin creation
This next approach has overdone the situation a little, but might shed a little more information on jQuery and create "reusable" code.
// generic replace in html function - proxies all the arguments to
// .replace()
$.fn.replaceHtml = function() {
var replaceArgs = arguments;
// jQuery 1.4 allows
return this.html(function(idx, oldHtml) {
return oldHtml.replace.apply(oldHtml, replaceArgs);
});
// older versions / another way to write it
// return this.each(function() {
// var $t = $(this), html = $t.html();
// $t.html(html.replace.apply(html, replaceArgs));
// });
};
// single task that uses the replaceHtml function
$.fn.removeNBSP = function() {
return this.replaceHtml(' ', '');
};
$('h1,h2,h3,h4,h5,p').removeNBSP();
source to share