Accorciare funzione jQuery

Question

ho scritto le seguenti funzioni per rimuovere i non-rottura spazi dal codice HTML in un sito di SharePoint (cucciolate SharePoint Designer qualunque codice scritto con spazi unificatori ogni volta che si apre il layout di pagina o masterpage! Si finisce per spendere tutto il vostro tempo andando avanti e l'eliminazione di loro).

In ogni caso, sembra troppo lungo, io sono abbastanza nuovo per jQuery e mi chiedevo se c'è un modo più pulito per svolgere lo stesso compito.

<script type="text/javascript">
    $(function(){
            $('h1').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h2').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h3').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h4').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
    $(function(){
            $('p').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 

    </script>

Answer 1

$(function() {
    $('h2, h3, h4, p').each(function() {
        var $h = $(this);
        var html = $h.html();
        html = html.replace( ' ', '' );
        $h.html( html );
    });
})

Answer 2

È possibile combinare tutti in uno $(function() { ... }); Non c'è molto motivo per voi di essere avvolgendo ciascuna di queste chiamate nel proprio gestore di eventi pronti documento.

Inoltre, si sta chiamando la stessa funzione su molti elementi, è possibile combinare i vostri selettori con una , conseguente $('h2,h3,h4,h5').each(function() {....}); molto più breve proposto da altri.

L'accorciamento del corpo della funzione:

var html = $h.html();
html = html.replace(' ', '');

può essere fatto su una riga con:

var html = $h.html().replace(' ', '');

e dal momento che si fa riferimento solo abbastanza a lungo per chiamare un'altra funzione - lo fa nemmeno realmente bisogno di essere conservato nella sua propria variabile:

$h.html($h.html().replace(' ', ''));

Se utilizzando jQuery> 1.4, utilizzare la nuova sintassi della funzione:

$h.html(function(index, oldHtml) { return oldHtml.replace(' ', ''); });

Naturalmente - il metodo su più linee ti dà più posti di inserire il codice di debug, se necessario, di solito comprimere questo genere di cose manualmente dopo verifico che funziona

.

Rendere un plugin

Questo approccio successivo è un po 'eccessivo per la situazione, ma può gettare un po' più di comprensione jQuery e il codice di creazione di 'riutilizzabile'.

// 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(); 

Answer 3

$(function() {
   $('h2, h3, h4, p').html(function(){ return $(this).html().replace(" ", "") }) 
});