Jquery：将3个数组转换为具有不同ID的不同对象

Question

我一直在玩弄一个非常简约的 jquery 管理区域菜单。问题是我希望 jQuery 构建 3 个具有不同 ID 的相同菜单。我设法通过创建一个函数并使用不同的变量调用它 3 次来做到这一点，但我想就这个可爱的社区提出我的第一个问题：

创建具有不同 ID 和内容的 3 个元素的最简约和最有效的方法是什么？

d=['Varer','Kate','Produ','Tilbud','Sider','Info','Pref'];

e=['Varer1','Kate1','Produ1','Tilbud1','Sider1','Info1','Pref1'];

f=['Varer2','Kate2','Produ2','Tilbud2','Sider2','Info2','Pref2'];

function menu(){
var e='';
$.each(d,function(a,b){e+='<a href=#'+b+'>'+b+'</a>'});
$('body').append('<div id=c>'+e+'</div>');}
menu();

提前致谢

Answer 1

你的方法其实很好。但请记住以下这些问题：

缺少 var 关键字将使变量成为全局变量。

var d = ['Varer' ..];

保持功能独立于外部环境。将数组作为参数传递。

function menu(array) {

}

将 id 作为参数传递给当前似乎为所有 div 分配 id "c" 的函数。

function menu(id, dataArray) {

}

每次向字符串追加内容时，都会创建一个新字符串。一种更快的方法是将这些字符串添加到数组中并在最后加入它们。这是menu 函数，请牢记以上几点。

function menu(id, data) {
    var links = $.map(data, function(value) {
        return  '<a href="#' + value + '">' + value + '</a>';
    }).get();

    var div = $('<div>', { 
        id: id,
        html: links.join('')
    });
    $('body').append(div);
}

简约代码并不意味着您应该使用一个字母的变量名称。把它留给压缩器。

menu('firstId', d);
menu('secondId', e);
menu('thirdId', f);

Answer 2

这个怎么样：http://jsfiddle.net/M6Upv/

d = ['Varer', 'Kate', 'Produ', 'Tilbud', 'Sider', 'Info', 'Pref'];
e = ['Varer1', 'Kate1', 'Produ1', 'Tilbud1', 'Sider1', 'Info1', 'Pref1'];
f = ['Varer2', 'Kate2', 'Produ2', 'Tilbud2', 'Sider2', 'Info2', 'Pref2'];

function menu(i, array) {
    var e = '';
    $.each(array, function(a, b) { e += '<a href=#' + b + '>' + b + '</a>'; });
        // Use the "i" value to make sure the container ID is unique
    $('body').append('<div id=c' + i + '>' + e + '</div>');
}
   // Place your arrays in an array, and call a separate .each()
   //    with your menu() function as the callback.
$.each([d, e, f], menu);​