1unitedpower: JQuery for Schleife

Beitrag lesen

var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];
$(function(){
   $(tag[0]).load(datei[0]);
});  
       
$(function(){
   $(tag[1]).load(datei[1]);
});  
       
$(function(){
   $(tag[2]).load(datei[2]);
});

$() ist eine Kurzschreibweise für $(document).ready() und das heißt, dass die Reihenfolge in der dein Code ausgeführt wirst, nicht die gleiche ist, in der man den Code auch liest. Folgendes geht zum Beispiel schief:

var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];

for (var i = 0; i < tag.length; i++) {
   $(function(){
      $(tag[i]).load(datei[i]);
   });
}

Wenn die Zeile $(tag[i]).load(datei[i]) ausgeführt wird, ist die for-Schleife bereits durchgelaufen und i ist dann immer 2.

Mit einem let-Binding ließe sich das Problem beheben:

var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];

for (let i = 0; i < tag.length; i++) {
   $(function(){
      $(tag[i]).load(datei[i]);
   });
}

Aber eleganter wäre es, die Vorschleife in den $-Block mit hinein zu nehmen:

var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];

$(function(){
   for (let i = 0; i < tag.length; i++) {
      $(tag[i]).load(datei[i]);
   }
});

Als Sahnehäubchen würde ich auch die Arrays tag und datei zu einem Array zusammenfassen, damit du sie nicht über die Index-Variable i miteinander korrelieren musst:

const content = [
   { tag: "header", datei: "header.html" }, 
   { tag: "article", datei: "artcile.html" }, 
   { tag: "footer", datei: "footer.html" }, 
];

$(function() {
   for (let {tag, datei} of content) {
      $(tag).load(datei);
   }
});

Mit der Kurzschreibweise für Funktionen könntest du die Leserlichkeit noch zusätzlich erhöhen:

const content = [
   { tag: "header", datei: "header.html" }, 
   { tag: "article", datei: "artcile.html" }, 
   { tag: "footer", datei: "footer.html" }, 
];

$(() => content.forEach(({tag, datei}) => $(tag).load(datei)));