jquery - jQuery関数の短縮

Question

SharePointサイトのHTMLコードからノーブレークスペースを削除するために、次の関数を作成しました（SharePoint Designerは、マスターページまたはページレイアウトを開くたびに、ノーブレークスペースを使用して記述したコードを散らかします！すべての時間を費やすことになります戻ってそれらを削除します）。

いずれにせよ、それは長すぎるように思われます。私はjQueryにまったく慣れておらず、同じタスクを実行するためのよりクリーンな方法があるかどうか疑問に思いました。

<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

それらのすべてを 1 つに組み合わせることができます$(function() { ... }); 。これらの各呼び出しを独自のドキュメント対応イベント ハンドラーにラップする理由はあまりありません。

また、多くの要素で同じ関数を呼び出しています。セレクターを組み合わせて、他の人が提案し,たはるかに短いものにすることができます。$('h2,h3,h4,h5').each(function() {....});

関数本体の短縮:

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

次のように 1 行で実行できます。

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

また、別の関数を呼び出すのに十分な時間だけ参照するため、実際には独自の変数に格納する必要さえありません。

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

または、jQuery > 1.4 を使用している場合は、新しい関数構文を使用します。

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

もちろん、複数行にまたがるメソッドにより、必要に応じてデバッグコードを挿入する場所が増えます。通常、この種のものは、動作することを確認した後、手動で圧縮します。

プラグインにする

この次のアプローチは、この状況では少しやり過ぎですが、jQuery と「再利用可能な」コードの作成について、もう少し洞察が得られるかもしれません。

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