finde nächstgelegenes Element mit bestimmter Klasse

[Berta]

Hallo,

google / duckduckgo / stackoverflow führt mich immer wieder zurück auf nextSibling bzw. nextElementSibling, was aber nicht ganz dem entspricht, wonach ich suche...

Wie lese ich von einem gewissen HTML Element (z.B. input, div, p, (was auch immer) mit einer gewissen ID ausgehend das NÄCHSTE Element mit einer gewissen Klasse aus?)

Wahrscheinlich suche ich auch einfach nur falsch...

Als Beispiel

<input type="text" id="speziellesInputFeld" />
<p>Paragraph 2</p>
<p>Paragraph x</p>
<img .... />
<p class="spezielleKlasse">Paragraph 5</p>



<script>
const speziellesInputFeld = document.getElementById("speziellesInputFeld");

// ************************************
// Von "speziellesInputFeld" ausgehend
// finde nächstes Element mit Klasse "spezielleKlasse"
// ************************************

</script>

[Berta]

Ok, bin jetzt doch endlich auf ein Resultat gestoßen:

document.querySelector(`#${this.id} ~ .spezielleKlasse`)

Trotzdem danke an alle, die helfen wollten!

Liebe Grüße aus Vortberg, Berta

[Rolf B]

Hallo Berta,

ja, sorry, so schnell geht's nicht immer 😉

Es ist wirklich blöd, dass querySelector grundsätzlich nur seine Kinder befragt und nicht links oder rechts gucken kann.

Der Aufruf querySelector("#eineId ~ .eineKlasse") funktioniert, sofern dein Bezugselement eine ID hat. Wenn nicht, geht das nicht. Und natürlich könnte man einwenden, dass der Browser erstmal der Selektor parsen und das Element mit der ID heraussuchen muss, das ist aber ein schwacher Einwand, weil genau diese Stellen höchstes Augenmerk der Optimierer haben.

Die MooTools haben einen Satz Methoden, um eine generische CSS Suchmaschine namens "Slick" herum, um Nachbarn relativ zu einem Element zu finden. Ohne ID. Aber man muss nicht immer gleich die Kuh auf's Eis führen - man kann auch selber ein JS Funktiönchen schreiben und an den Element-Prototyp kleben:

Element.prototype.getNextSibling(selector) {
   let elem = this;
   while (elem = elem.nextElementSibling) {
      if (!selector || elem.matches(selector))
        return elem;
   }
   return null;
}

Und dann hast Du eine hübsche Methode am Element-Objekt.

let spIF = document.getElementById("speziellesInputFeld");
let spC = spIF.getNextSibling(".spezielleKlasse");

Rolf