Клонные элементы, найденные с различными селекторами, избегая повторения кода

Question

Не могли бы вы помочь мне, как упростить этот код? Я думаю, он слишком длинный и запутанный.

var launchPad = $(".launchPad").clone(); 
var launchPad_plankovy = $(".launchPad-plankovy").clone(); 
var launchPad_plankovy_tvarovany = $(".launchPad-plankovy-tvarovany").clone(); 
var launchPad_tyckovy = $(".launchPad-tyckovy").clone(); 
var launchPad_kombinovany = $(".launchPad-kombinovany").clone(); 
var launchPad_barvy_plankovy = $(".launchPad-barvy-plankovy").clone(); 
var launchPad_barvy_tyckovy = $(".launchPad-barvy-tyckovy").clone(); 
var launchPad_zakonceni_plotovek = $(".launchPad-zakonceni-plotovek").clone(); 
var launchPad_zakonceni_tycek = $(".launchPad-zakonceni-tycek").clone(); 

$("[name='reset']").click(function(){ 
    $(".launchPad").html(launchPad.html()); 
    $(".launchPad-plankovy").html(launchPad_plankovy.html()); 
    $(".launchPad-plankovy-tvarovany").html(launchPad_plankovy_tvarovany.html()); 
    $(".launchPad-tyckovy").html(launchPad_tyckovy.html()); 
    $(".launchPad-kombinovany").html(launchPad_kombinovany.html()); 
    $(".launchPad-barvy-plankovy").html(launchPad_barvy_plankovy.html()); 
    $(".launchPad-barvy-tyckovy").html(launchPad_barvy_tyckovy.html()); 
    $(".launchPad-zakonceni-plotovek").html(launchPad_zakonceni_plotovek.html()); 
    $(".launchPad-zakonceni-tycek").html(launchPad_zakonceni_tycek.html()); 
}); 

Answer 1

Вы могли бы сделать one big selector и собрать все элементы сразу. Вы можете применить 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', список не должен быть таким длинным.

Кроме того, поскольку вы используете только HTML-клоны, вы получите лучшую производительность и использование памяти, если вы на самом деле не клонируете, а просто сохраните HTML. Вместе с идеей, чтобы дать класс restorable для всех этих элементов, код становится:

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]; 
    } 
}); 

В lodash, это движение элегантна:

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