コードセレクションを避けて、異なるセレクタでクローン要素を見つける

Question

このコードを簡略化する方法を教えてください。私は、それは長すぎて混乱していると思います。

Answer 1

one big selectorとし、すべての要素をまとめて収集できます。 1回の呼び出しですべてcloneを適用することができます。復元するには、同じセレクタを再利用し、結果をループし、収集したクローンからHTMLを置き換えます。

var $restorable = $(".launchPad, .launchPad-plankovy, " + 
    " .launchPad-plankovy-tvarovany, .launchPad-tyckovy, .launchPad-kombinovany, " + 
    " .launchPad-barvy-plankovy, .launchPad-barvy-tyckovy, " + 
    " .launchPad-zakonceni-plotovek, .launchPad-zakonceni-tycek"); 

var $launchPad = $restorable.clone(); 

$("[name='reset']").click(function(){ 
    $restorable.each(function (i) { 
     $(this).html($launchPad.eq(i).html()); 
    }); 
}); 

各要素に固有のクラスを付けることに気づいたようです。そのためにはidプロパティを使用し、同じクラスの同じ種類の要素にマークを付けるためにクラスを使用する方が良いでしょう。 'restorable'のように、これらすべての要素に1つのクラスを使用する場合、そのリストはそれほど長いものではありません。

また、クローンのHTMLのみを使用するため、実際にクローンを作成せずにHTMLを保存するだけで、パフォーマンスとメモリの使用効率が向上します。一緒にアイデアを、これらすべての要素にクラスrestorableを与えるために、コードは次のようになります。lodashで

var $restorable = $(".restorable"); 

var launchPadHtml = $restorable.map(function() { return $(this).html(); }).get(); 

$("[name='reset']").click(function(){ 
    $restorable.each(function (i) { 
     $(this).html(launchPadHtml[i]); 
    }); 
}); 

Answer 2

var keys = ['launchPad-plankovy-tvarovany', 'launchPad-plankovy' ...]; 
var clones = {}; 
keys.forEach(function(key){ 
    clones[key] = $('.' + key).clone(); 
} 

$("[name='reset']").click(function(){ 
    keys.forEach(function(key){ 
    $('.' + key).html(clones[key]; 
    } 
}); 

は、それは優雅な動きだ：

var keys = ['launchPad-plankovy-tvarovany', 'launchPad-plankovy' ...]; 
var clones = _.zipObject(keys, _.map(keys, function(key){ 
    return $('.' + key).clone(); 
});