Jquery: Transformez 3 tableaux en différents objets avec des ID différents

Question

J'ai triché avec un menu de zone d'administration jquery très minimaliste. La chose est que je veux que jQuery construise 3 menus égaux avec des ID différents. J'ai réussi à le faire en créant une fonction et en l'appelant 3 fois avec différentes variables, mais je voudrais poser ma première question sur cette belle communauté:

Quelle est la manière la plus minimaliste et efficace de créer 3 éléments avec différents ID et contenu?

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(); 

Merci à l'avance

Answer 1

Que diriez-vous ceci: 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);​ 

Answer 2

Votre méthode est en fait vraiment bon. Gardez à l'esprit les problèmes suivants:

Le fait de manquer le mot-clé var rendra la variable globale.

var d = ['Varer' ..]; 

Conserver la fonction indépendamment de l'environnement extérieur. Passez le tableau en tant que paramètre. Passez l'id comme argument dans la fonction qui semble actuellement attribuer à tous les divs l'identifiant "c".

function menu(id, dataArray) { 

} 

Chaque fois que vous ajoutez un élément à une chaîne, une nouvelle chaîne est créée. Une méthode plus rapide consiste à ajouter ces chaînes à un tableau et à les joindre à la fin. Voici la fonction menu en gardant tous les points ci-dessus à l'esprit.

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

Le code minimaliste ne signifie pas que vous devez utiliser des noms de variable à une lettre. Laissez cela à la minifourgonnette.

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