これらの重複するJavaScriptコードをループに短縮するにはどうすればよいですか？

Question

私は各行に4列を含む10行を持っていましたが、今はlocalStorageを使用してインポートした値を取得したいと思います。私はこれらのすべての値を独立して入れる方法を見つけますが、コードはすべて繰り返しです。これらはコードの冗長性を引き起こします。私はループを使用してコードを短縮する方法があるのだろうか？

document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0]; 

...簡単な最初のパスの改善だけで"r1"の代わりに変数を使用して、ネストされたforループを使用するために、次のようになります。ここでは

はこの繰り返しの行を見てみると、私のコード

var res = {}; 
    $(function(){ 
    $('#subbtn').click(function() { 
     console.log($('#tab').find('tr')) 
     $('tr').each(function(){ 
      var tmp = []; 
      var cl ; 
      $(this).find('select').each(function(){ 
      cl = $(this).attr('class'); 
      //console.log(cl); 
      tmp.push($(this).val()); 
      }) 

      res[cl] = tmp 
     }) 
     console.log(res); 
     localStorage.setItem("testingvalue",JSON.stringify(res)); 
     document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue")); 
    }) 

    }) 
    $(document).ready(function(){ 
    var res = {}; 
    try { 
    console.log('existed'); 
     res = JSON.parse(localStorage.getItem("testingvalue")); 

    //alert(res.r1[2]); 
    document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0]; 
    document.getElementsByClassName("r1")[1].selectedIndex=res.r1[1]; 
    document.getElementsByClassName("r1")[2].selectedIndex=res.r1[2]; 
    document.getElementsByClassName("r1")[3].selectedIndex=res.r1[3]; 

    document.getElementsByClassName("r2")[0].selectedIndex=res.r2[0]; 
    document.getElementsByClassName("r2")[1].selectedIndex=res.r2[1]; 
    document.getElementsByClassName("r2")[2].selectedIndex=res.r2[2]; 
    document.getElementsByClassName("r2")[3].selectedIndex=res.r2[3]; 

    document.getElementsByClassName("r3")[0].selectedIndex=res.r3[0]; 
    document.getElementsByClassName("r3")[1].selectedIndex=res.r3[1]; 
    document.getElementsByClassName("r3")[2].selectedIndex=res.r3[2]; 
    document.getElementsByClassName("r3")[3].selectedIndex=res.r3[3]; 

    document.getElementsByClassName("r4")[0].selectedIndex=res.r4[0]; 
    document.getElementsByClassName("r4")[1].selectedIndex=res.r4[1]; 
    document.getElementsByClassName("r4")[2].selectedIndex=res.r4[2]; 
    document.getElementsByClassName("r4")[3].selectedIndex=res.r4[3]; 

    document.getElementsByClassName("r5")[0].selectedIndex=res.r5[0]; 
    document.getElementsByClassName("r5")[1].selectedIndex=res.r5[1]; 
    document.getElementsByClassName("r5")[2].selectedIndex=res.r5[2]; 
    document.getElementsByClassName("r5")[3].selectedIndex=res.r5[3]; 

    document.getElementsByClassName("r6")[0].selectedIndex=res.r6[0]; 
    document.getElementsByClassName("r6")[1].selectedIndex=res.r6[1]; 
    document.getElementsByClassName("r6")[2].selectedIndex=res.r6[2]; 
    document.getElementsByClassName("r6")[3].selectedIndex=res.r6[3]; 

    document.getElementsByClassName("r7")[0].selectedIndex=res.r7[0]; 
    document.getElementsByClassName("r7")[1].selectedIndex=res.r7[1]; 
    document.getElementsByClassName("r7")[2].selectedIndex=res.r7[2]; 
    document.getElementsByClassName("r7")[3].selectedIndex=res.r7[3]; 

    document.getElementsByClassName("r8")[0].selectedIndex=res.r8[0]; 
    document.getElementsByClassName("r8")[1].selectedIndex=res.r8[1]; 
    document.getElementsByClassName("r8")[2].selectedIndex=res.r8[2]; 
    document.getElementsByClassName("r8")[3].selectedIndex=res.r8[3]; 

    document.getElementsByClassName("r9")[0].selectedIndex=res.r9[0]; 
    document.getElementsByClassName("r9")[1].selectedIndex=res.r9[1]; 
    document.getElementsByClassName("r9")[2].selectedIndex=res.r9[2]; 
    document.getElementsByClassName("r9")[3].selectedIndex=res.r9[3]; 

    document.getElementsByClassName("r10")[0].selectedIndex=res.r10[0]; 
    document.getElementsByClassName("r10")[1].selectedIndex=res.r10[1]; 
    document.getElementsByClassName("r10")[2].selectedIndex=res.r10[2]; 
    document.getElementsByClassName("r10")[3].selectedIndex=res.r10[3]; 

    } 

    catch (error){ 
     console.log(error.message); 
    } 


}); 

Answer 1

ですおよび0：

for (var r = 1; r <= 10; r++) { 
    for (var i = 0; i < 4; i++) { 
    document.getElementsByClassName("r" + r)[i].selectedIndex = res["r" + r][i]; 
    } 
} 

いいえ

var els; 
for (var r = 1; r <= 10; r++) { 
    els = document.getElementsByClassName("r" + r); 
    for (var i = 0; i < 4; i++) { 
    els[i].selectedIndex = res["r" + r][i]; 
    } 
} 

第二のバージョン内で：外側のループにそれを移動する方が良いだろう - これは.getElementsByClassName("r" + r)コールは非常に効率的ではないれ、rの各値のための4つの時間に発生意味しかしTICE、ループはi < 4ではなくi < els.lengthと言うことができますが、どちらの方法でも、HTML要素の数とresオブジェクトの項目数を一致させる必要があります。

res = JSON.parse(localStorage.getItem("testingvalue")); 
    // Let's start with checking 'res' type. 
    // - if it's an Array, get the the length from .length 
    // - if it's Object, get the the length from Object.keys().length 
    var resLength = Array.isArray(res) ? res.length : typeof res === 'object' ? Object.keys(res).length : 0; 
    // loop throw the rows. 
    for (var i = 0; i < resLength; i++) { 
    // Do the same as above: get type of the row and calculate it length for the loop. 
    var rowLength = Array.isArray(res[i]) ? res.length : typeof res[i] === 'object' ? Object.keys(res[i]).length : 0; 
    // loop throw the columns on the row. 
    for (var j = 0; j < rowLength; j++) { 
     document.getElementsByClassName('r'+i)[j].selectedIndex=res['r'+i][j]; 
    } 
} 

Answer 2

次のコードは、ストレージ内のデータのサイズに関係なく動作します。 jQueryを使用すると、これがはるかに簡単になります。ここで

は一例です。もちろん

var res = JSON.parse(localStorage.getItem("testingvalue")); 
$("tr select").each(function(){ 
    $(this).val(res[$(this).attr("class")][$(this).index()]); 
}); 

select要素が一つだけのクラス名とresオブジェクトがtr要素内にあるすべてのselectの要素の値が含まれている場合、これはのみ動作します。あなたの質問のjQueryコードに基づいているようです。

そして、これは、より安全なアプローチである

Object.keys(res).forEach(function(key){ 
    res[key].forEach(function(val, index){ 
     $("tr select." + key).eq(index).val(val); 
    }); 
}); 

Answer 3

あなたはjQueryライブラリがロードされているように見えるしました：