> ~~~js > 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: ~~~js 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: ~~~js 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: ~~~js 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: ~~~js 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: ~~~js const content = [ { tag: "header", datei: "header.html" }, { tag: "article", datei: "artcile.html" }, { tag: "footer", datei: "footer.html" }, ]; $(() => content.forEach(({tag, datei}) => $(tag).load(datei))); ~~~

> ~~~js > 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: ~~~js 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: ~~~js 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: ~~~js 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: ~~~js 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: ~~~js const content = [ { tag: "header", datei: "header.html" }, { tag: "article", datei: "artcile.html" }, { tag: "footer", datei: "footer.html" }, ]; $(() => content.forEach(({tag, datei}) => $(tag).load(datei)}); ~~~