Class direkt ansprechen

[Oly]

Hallo zusammen,

ist es möglich aus Tabelleneinträgen Werte zu bekommen anhand der Classeneinträge?
z.B., ich habe ein Div in dem mehrere Tabellen sind, die einzellnen Tabelleneinträge besitzen alle den selben ClassName.
Die Anzahl der gesammten Einträge kann ich ermitteln. Ist es jetzt möglich, das ich den TextContent, sagen wir mal des 5. Eintrages der Class bekomme?

[AndreasB]

Hallo @"Oly"

Wenn ich dich richtig verstehe suchst du etwas wie das:

Code:

document.querySelectorAll('.myClassName')[4]

Wenn du etwas anderes meinst, solltest du dein HTML code mal posten, und nochmal beschreiben, was du erreichen möchtest.

[Oly]

Moin Andreas,

ja im Prinzip könnte es klappen wenn es laufen würde.

Im Moment lese ich die Anzahl wie folgt aus

Code:

console.log(document.querySelector("#registerable-tasks").getElementsByClassName("task-id danger").length);

klappt soweit. Jetzt dachte ich, so wie Du es beschrieben hast, jede Class auslesen zu können.
Folge ich deinem Beispiel,

Code:

    let num = document.querySelectorAll(".task-id danger");
    console.log(num.length);

bekomme ich immer "0" zurück.


ich habe mehrere ähnliche Einträge wie diese

Code:

<tr class="task-id danger" data-id="38451632" role="row"></tr>

und hätte gerne alle in einer List, so wie dein Bsp um jede Class ansprechen zu können, da ich von jeder die "data-id" haben und mit einer Schleife bearbeiten möchte

---

danke für den Hinweis,

habe es jetzt so lösen können

Code:

    let num = document.querySelector("#registerable-tasks").getElementsByClassName("task-id danger");
    console.log(num[2].getAttribute("data-id"));

[AndreasB]

Hallo Oly,

Schön, dass du die Lösung selber gefunden hast.


Nochmal als Tipp: dein Aufruf von

Code:

document.querySelectorAll(".task-id danger");

Ist nicht, dass was du willst.
Dieser Selector sucht ein Element mit dem Tag-Namen danger innerhalb eines Elements mit der Klasse task-id.
also so was:

Code:

<div class="task-id">
    <danger>Dieses Element wird gesucht.</danger>
</div>

Wenn du ein Element selektieren möchtetst, dass sowohl die Klasse task-id als auch die Klasse danger hat muss das so aussehen (wie auch in CSS):

Code:

document.querySelectorAll(".task-id.danger");

[rzscout]

Hi Oly,
Mit der querySelectorAll-Methode und der forEach-Methode lassen sich ein Objekt-Element-Array erstellen und durchlaufen. Dabei kann man bei den Durchläüfen in der forEach-Methode sowohl das aktuelle item(Element) als auch den Index zurück geben lassen. Das ganze sieht dann so aus:

Code:

document.querySelectorAll('.meineKlasse').forEach((item, index)=>{
    if(index == 5) {
        item.textContent = "Hallo Welt";
    }
});

Ich kann dir die Methoden nur empfehlen, da damit nicht nur der fünfte Wert sondern auch andere Werte vegleichen lassen in einer Funktion.

Viele Grüße

rzscout