jQuery-Selektor tut nicht was er soll

[7ph]

Hallo,

ich entwickle gerade ein ganz kleines Spiel in Javascript, welches eine Datenbank für Highscores enthält, nun habe ich aber Probleme, die über Ajax vom Server kommenden Werte in eine Tabelle einzutragen, welche aus 10x exakt diesem Tabellenzeilen entsteht:

<tr>
    <td class="highscores"></td>
    <td class="highscores"></td>
</tr>

Es gibt keine weiteren Tabellen oder td-Tags im Dokument.

Mit folgender kleiner Schleife möchte ich die Werte in die Tabelle eintragen:

for (let i = 0; i < 10; i++) {
    $("td.highscores").eq(i * 2).text("..... Name");
    $("td.highscores").eq(i * 2 + 1).text("..... Score");
 }

Dabei passiert jedoch nichts (sichtbares).
Verwenden tue ich diese recht aktuelle Version von jquery: https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Was genau mache ich falsch?
Mit dem :eq(..) Selektor erhalte ich ebensowenig ein Ergebnis.

lg

 

[Yuuri]

Du solltest beginnen sinnvolle CSS-Klassen zu setzen.

<table>
  <tr class="row1">
    <td class="name"></td>
    <td class="highscore"></td>
  </tr>
  <tr class="row2">
    <td class="name"></td>
    <td class="highscore"></td>
  </tr>
  <!-- ... -->
</table>

Am besten siehst du dir gleich CSS BEM an, damit macht sichs gleich noch komfortabler, da eindeutig.

<table class="c-highscores">
  <tr class="c-highscores__item c-highscores__item--1">
    <td class="c-highscores__item--name"></td>
    <td class="c-highscores__item--score"></td>
  </tr>
  <tr class="c-highscores__item c-highscores__item--2">
    <td class="c-highscores__item--name"></td>
    <td class="c-highscores__item--score"></td>
  </tr>
  <!-- ... -->
</table>

Dann kannst du problemlos mittels

$(function () {
  const highscores = [
    { position: 1, name: "foo", score: "1234" },
    { position: 2, name: "bar", score: "123" },
    // ...
  ]
  for (var i of highscores) {
    const row = $(".c-highscores.c-highscores__item--" + i.position)
    row.find(".c-highscores__item--name").text(i.name)
    row.find(".c-highscores__item--score").text(i.score)
  }
})

deine Tabelle füllen.

 

[spliffi]

Ich vermute der Fehler liegt irgendwo bei deinen mit Ajax übertragenen Daten bzw. deren Auswertung.
Ich habe als Beispiel ein Array mit 10 Objekten, bestehend aus Namen und Punktzahl benutzt, und die Ausgabe funktioniert mit deinen Vorgaben korrekt:

var highscore = [{name:"John 1",score:11},{name:"John 2",score:22},{name:"John 3",score:33},{name:"John 4",score:44},{name:"John 5",score:55},{name:"John 6",score:66},{name:"John 7",score:77},{name:"John 8",score:88},{name:"John 9",score:99},{name:"John 10",score:100}];
    
    for (let i = 0; i < 10; i++) {
        $("td.highscore").eq(i*2).text(highscore[i].name);
        $("td.highscore").eq(i*2+1).text(highscore[i].score);
     }

 

[7ph]

Danke für die beiden Antworten, das ganze lag aber an einem ziemlichen Anfängerfehler, ich habe die Schleife ausgeführt, bevor die Tabelle geladen wurde..