这个jquery / javascript循环的较短替代品?

时间:2013-06-30 20:23:48

标签: javascript jquery html loops

在我的webapp中的某个点上,我有以下(大)循环系列:

jQuery.each(GO, function(index, item){  $("#GO_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+GO_desc[index]+"</a></li>");});

jQuery.each(AP, function(index, item){  $("#AP_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+AP_desc[index]+"</a></li>");});

jQuery.each(BV, function(index, item){  $("#BV_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+BV_desc[index]+"</a></li>");});

jQuery.each(FI, function(index, item){  $("#FI_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+FI_desc[index]+"</a></li>");});

循环继续,但模式始终相同。

有没有什么方法可以通过使用某种数组或列表而不是显式地编写循环来缩短它?

由于

3 个答案:

答案 0 :(得分:1)

DRY(不要重复自己):首先创建一个功能:

   function createLink(a,b,c){
        jQuery.each(a, function(index, item){  $(b).append(
        "<li><a href=javascript:dopage('"+item+"');>"+c[index]+"</a></li>");});
    }

并致电

createLink(BV,"#BV_PUBS",BV_desc);

答案 1 :(得分:1)

function xxx(a, b, c) {
    jQuery.each(a, function(index, item){
        $(b).append("<li><a href=javascript:dopage('"+item+"');>"+c[index]+"</a></li>");
    });
}

xxx(GO, "#GO_PUBS", GO_desc);
xxx(AP, "#AP_PUBS", AP_desc);
xxx(BV, "#BV_PUBS", BV_desc);
xxx(FI, "#FI_PUBS", FI_desc);

答案 2 :(得分:0)

这样的事情:

var iterator = function(id, array) {
  var $holder = $("#" + id);
  return function(index, item) {
    $holder.append("<li><a href=javascript:dopage('"+item+"');>"+array[index]+"</a></li>");
  };
};

jQuery.each(GO, iterator('GO_PUBS', GO_desc));
jQuery.each(AP, iterator('AP_PUBS', AP_desc));
jQuery.each(BV, iterator('BV_PUBS', BV_desc));
jQuery.each(FI, iterator('FI_PUBS', FI_desc));

如果你能够在这样的地图中掌握所有数组(GO, AP,..):

var collection = {'GO': {asc: GO, desc: GO_desc}, ...};

您将能够做到这样的事情:

for(var key in collection) {
  if(collection.hasOwnProperty(key)) {
    var arrMap = collection[key];
    jQuery.each(arrMap.asc, iterator(key + '_PUBS', arrMap.desc));
  }
}

更新

使用3D阵列:

var 3dArr = [['GO', GO, GO_desc], ...], 3dArrLen = 3dArr.length, i = 0;
for(i; i < 3dArrLen; i++) {
  var v = 3dArr[i];
  (function(id, arr, arr_desc) {
    jQuery.each(arr, iterator(id + '_PUBS', arr_desc));
  })(v[0], v[1], v[2]);
}