JavaScript Für jeden DIV-Container

[ClocxHD]

Hallo,

mit folgendem Code (Twig) erstelle ich für jedes Projekt aus der Datenbank einen neuen DIV-Container:

<div class="tab-content tab-projects-overview-content">
	{% if projects is not empty %}
		{% for project in projects %}
			<div id="{{ project.Identifier }}" role="tabpanel" class="tab-pane{% if project.Active is not empty and project.Active == 1 %} active fade in{% else %} fade{% endif %}">
				<h2>{{ project.Name }}{% if project.project_for is not empty %} für {{ project.project_for }}{% endif %}</h2>
				<div class="overview-body" data-project="{{ project.Identifier }}"></div>
			</div>
		{% endfor %}
	{% endif %}
</div>

(Für die Übersichtlichkeit auch einen Pastebin-Link)

Das funktioniert auch.
Jedoch möchte ich in den jeweiligen Container mit der Klasse "overview-body" den Inhalt aus einer Datei auslesen.

Dafür habe ich folgendes versucht:

function getProjectPanelBody() {
    var project = $(".overview-body").data("project");
    $(".overview-body").each(function () {
        $(this).load(project + ".twig");
    });
}

$(document).ready(function () {
    getProjectPanelBody();
});

Jedoch schreibt er damit in jeden DIV-Container den gleichen Inhalt.

Wie bekomme ich es hin, dass er in jeden DIV-Container den entsprechenden Inhalt lädt?

LG,
ClocxHD

 

[SomeDifferent]

Zeile 2 ist falsch. Die data-project-Abfrage gehört mit ins ForEach

 

[ClocxHD]

Stimmt. Habe ich jetzt gemacht, jedoch lädt er immer noch nur die erste Datei in alle Container

 

[SomeDifferent]

Hast du die Zeile 1:1 kopiert? Ich kenne mich mit Javascript sogut wie garnicht aus. Trotzdem vermute ich, dass du so nur auf das erste Objekt der overview-body Klasse zugreifst.

 

[ClocxHD]

Ja, ich habe die Zeile 1:1 kopiert, hier der neue Code:

function getProjectPanelBody() {
    $(".overview-body").each(function () {
        var project = $(".overview-body").data("project");
        $(this).load(project + ".twig");
    });
}

$(document).ready(function () {
    getProjectPanelBody();
});

 

[SomeDifferent]

probier mal

  var project = this.data("project");

// anstatt

  var project = $(".overview-body").data("project");

 

[ClocxHD]

Vielen Dank, das funktioniert