Question

我有几组几乎相同的each语句。我需要添加大约20个遵循类似模式的东西。我正在试图弄清楚如何将小变量更新为一个语句（而不是相同的，稍微不同的20次）。

$.each(mainData.name.source_values, function(index, val) {
  $("#matrix_datatable").find('#mNames')
    .append($('<td class="tableCells">')
    .append(val.value + '</td>')
  )
}); 
$.each(mainData.description.source_values, function(index, val) {
  $("#matrix_datatable").find('#mDescription')
    .append($('<td class="tableCells">')
    .append(val.value + '</td>')
  )
});
$.each(mainData.subtitle.source_values, function(index, val) {
  $("#matrix_datatable").find('#mSubtitle')
    .append($('<td class="tableCells">')
    .append(val.value + '</td>')
  )
});

正如您所看到的，唯一不同的是name,description,subtitle和mNames,mDescription,mSubtitle。我如何将它组合成一个语句，该语句使用这两组“变量”中的数组（或某些东西），这些变量包含我需要挖掘的所有20多个变量：

var $dataPoints = ['name','description','subtitle'];
var $tableIds = ['mNames','mDescription','mSubtitle'];

Answer 1

您可以提取功能以便Don't Repeat Yourself：

function append(id) {
    return function(index, val) {
        $('#matrix_datatable').find(id)
             // if your value doesn't contain HTML, opt for this
            .append($('<td>', { class: 'tableCells', text: val.value })
            // if it contains html, replace `text` with `html`
        );
    };
}

$.each(mainData.name.source_values, append('#mName'));
$.each(mainData.description.source_values, append('#mDescription'));
$.each(mainData.subtitle.source_values, append('#mSubtitle'));

您还可以遍历$.each：

for (let i = 0; i < 3; i++) {
     $.each(mainData[$dataPoints[i]].source_values, append('#'+$tableIds[i]))
}

事实上，有很多方法可以重构这段代码！

Answer 2

第一步，将您的常用逻辑提取出一个可以重复使用的函数，而不是一遍又一遍地重复它

function addTableCells ( elements, targetId ) {
    $.each(elements, function(index, val) {
        $("#matrix_datatable").find(targetId)
            .append($('<td class="tableCells">'+ val.value +'</td>');
    });
}

Answer 3

从您的问题看来，目标是提取一个可以多次执行并产生类似结果的函数。通过定义执行相同迭代的函数，在参数化变量上查找和追加操作，您可以多次使用此函数。

这样的事情应该是你正在寻找的东西：

function updateDom(arrayOfValues, parentElementId, childElementId) {
    $.each(arrayOfValues, function(index, val) {
       $('#' + parentElementId).find('#' + childElementId)
       .append($('<td class="tableCells">')
       .append(val.value + '</td>'))});
}

Answer 4

你可以这样做。

var lst = [mainData.name.source_values, mainData.description.source_values, mainData.subtitle.source_values];
var ids = ["mNames", "mDescription", "mSubtitle"];

for (i = 0; i < lst.length; i++) {
    $.each(lst[i], function(index, val) {
        $("#matrix_datatable").find( "#" + ids[i] )
            .append($("<td class='tableCells'>")
            .append(val.value + "</td>")
    });
}

Answer 5

我不确定这是否是您打算做的，但是如何包装你的每个人都在foreach内：）

var dataPoints = ['name','description','subtitle'];
dataPoints.forEach( (field) => {
   var tableId = <generate table id from field string, add letter m and camelcase the field name>;
   $.each(mainData[field].source_values, function(index, val) {
     $("#matrix_datatable").find('#' + tableId)
      .append($('<td class="tableCells">')
      .append(val.value + '</td>')
     )
   }); 
});

合并多个（几乎）复制每个语句

5 个答案: