@cloned


Danke für Deine Hinweise.


Ich hatte den Text "only with functions like document.querySelector(). " auf developer.mozilla.org so interpretiert, dass es nur auf diese spezielle Weise bereits jetzt experimentell nutzbar ist.


Aber da habe ich mich wohl getäuscht.


Zu "classlist von JS":

Am hilfreichsten wäre es, wenn ihr hier funktionierende Beispiele posten würdet.


Also HTML-Code plus JS-Code. Und wenn ihr zeigt, welcher Teil des HTML-Codes durch den JS-Code ausgeblendet wird.

Ich schaffe es leider nicht aus den JS-Dokumentationen eigene Beispiele zu bauen. Schon an der Umsetzung in Greasemonkey bin ich gescheitert.

Wie immer, das ist keine Erwartung, nur eine Bitte.


Es geht ja um möglichst universell und leicht anzuwendenden JS-Code als "Nachbildung von Eltern und Vorfahren-Selektoren". Das ist ja das übergeordnete Ziel.

__________________

Dafür verwende am einfachsten jQuery, für ein Lokales greasemonkey-skript ist das irrelevant bezüglich Ladezeit etc.
Dann kannst du :has auch verwenden. https://api.jquery.com/has-selector/

Die Funktion von jquery bezüglich :has nachzubauen ist nicht ganz so einfach, da wird mittels Sizzle-Library gearbeitet und anhand der überprüft, ob Elemente vorhanden sind.

Am Einfachsten ist, du kopierst einfach den Code von hier https://code.jquery.com/jquery-3.3.1.min.js in dein greasemonkey-Skript (am Beginn) und dann kannst du jquery verwenden.

Zu den restlichen Punkten ist alles auf der Seite dokumentiert, bei konkreten Anfragen bin ich gerne bereit zu helfen, aber hier geht es ja um einen generischen Vorfahrenselektor und nicht darum, wie man feststellt, ob ein Element eine Klasse hat.

Danke erstmal für Deine Hinweise.


Ich habe darauf aufbauend ein Testcase gebaut:


https://codepen.io/fermion/pen/QZzGPj


Aber mein Skript ist wohl fehlerhaft.


Auch als normale Webseite funktioniert das Testcase auch nicht:
https://borumat.de/-/js-test-has

__________________

Du kannst im JS kein HTML verwenden (also kein <script src="..." > )
Auch machst du den selben Fehler wie beim ersten Skript: Du musst dein JS erst bei ondomready ausführen und nicht sofort.

Du öffnest den Link von jquery den ich kopiert habe und drückst command (oder apfel/birne/whatever) a um alles auszuwählen und kopierst das dann am Beginn von dem JS file.
Wenn du jQuery verwendest dann kannst du auch nicht einfach jQuery und "normales" JS mischen, du musst auf jquery Objekte auch jquery Befehle anwenden, bzw diese zuerst zu normalen JS-dom-objekten machen.
Zum ausblenden kannst du aber auch .hide() von jquery verwenden.

Aber genau das steht doch auf der von Dir zitierten Seite:
https://api.jquery.com/has-selector/




Dies zusammen mit

funktioniert:


https://borumat.de/-/js-test-has-2


Uff.


Zur Bewertung des Verfahrens mit ":has":


Haltet ihr es für besser als das zuvor eingesetzte mit "parent.node"?

__________________

Schau genau (nicht bös gemeint), auf der Dokumentationsseite von jquery wird oft das komplette HTML gepostet, das ist auch bei dem Beispiel der Fall.
Im HTML darfst du natürlich <script> Tag verwenden (auch wenn dann natürlich die Reihenfolge wichtig ist)



jQuery wird von Millionen Seiten eingesetzt und von mehreren erfahrenen Leuten programmiert. Wenn du dir anmaßt dass du es besser kannst als all diese Leute zusammen, dann "Hut ab"

Um das ganze weiter auszuführen: Wenn du nur für diese eine Funktion jQuery einbindest ist es auf einer live-Seite ein overkill (Kanonen auf Spatzen und so). Für ein lokales Greasemonkey-Script aber akzeptabel, du wirst keinerlei Geschwindigkeitseinbußen dadurch haben (und nur darum geht es letztendlich)

Warum verwendest du eigentlich jQuery Version 1.10 und nicht 3.3.1?

@cloned


Erstmal Danke für Deinen freundlichen Tonfall, das nehme ich wahr und Danke Dir dafür

Zum Einbinden des JQuery:
Du hattest ja vorgeschlagen, den Code zu kopieren und per Copy&Paste einzufügen.
Mir ist noch nicht klar, in welcher Situation das einen Vorteil hat, gegenüber einem einfachen Einbinden der externen Datei via Element "script".
Aber vielleicht missverstehen wir uns auch in diesem Punkt noch.


Zu "welches Verfahren bewertet ihr als besser":
Ihr hatte ja im Ausgangsposting das Usecase genau skizziert. Ich wollte durch ein Userscript (also lokal) etwas manipulieren.
Zunächst hattest Du und Basti mir ein Verfahren mit "parent.node" vorgeschlagen.

Erst durch mein Insistieren und Nachhaken zu dem Verfahren mit ":has" kam ja heraus, dass es ebenfalls angewendet werden kann.

Nun fragte ich mich, warum ihr es am Anfang nicht vorgeschlagen hattet. Hat es vielleicht Nachteile gegenüber dem Verfahren mit "parent.node"?

Deshalb hatte ich nachgefragt, wie ihr die beiden Verfahren im Vergleich bewertet und warum ihr sozusagen nicht gleich am Anfang das Verfahren mit ":has" vorschlugt? Wenn das jemand als Greasemonkeybeispiel gepostet hätte, wäre der Thread genau 3 Postings lang gewesen (ist auch nicht böse gemeint)


Zur Version:
Ich hatte einfach das kopiert, was auf der von Dir verlinkten Seite stand.


Hier für alle Leser des Threads, die endgültige Lösung der Aufgabe als Greasemonkeyskript:


Sowas hätte ich mir nie erträumt
Man kann sogar aus CSS gewohnte Syntax verwenden.

Klarer, prägnanter und übersichtlicher kann ich mir keine universelle Lösung vorstellen.

Ganz herzlichen Dank nochmal für eure Hilfe!

__________________

Es geht dir hier lediglich um eine lokale Lösung. Auch hast du keinerlei JS Kenntnisse und warst mit meiner Anleitung wie man den Code zu schreiben hat überfordert.
Du hattest ja auch Probleme jQuery bei codepen einzubinden indem du den <script>-Tag einfach in die JS Datei geschrieben hast.
Da ist die "Kopieren -> Einfügen" Lösung die, welche am einfachsten zu erklären ist. (Meiner Mama zB würde ich auch sagen sie soll das kopieren und dort einfügen da sie keinerlei Kenntnisse von JS hat. Ja, weit hergeholter Vergleich am Montag morgen aber ich denke du verstehst was ich sagen will.)

Wenn du es auch anders inbinden kannst ist es auch super, wirklich einen Unterschied wirst du lokal nicht feststellen.


Weil es mit "nur JS" nur möglich ist, parent.node zu verwenden. Für eine lokale Anforderung mit einem Skript ist diese Lösung auch ausreichend, für :has ist jQuery nötig.
Das haben wir die Anfangs also nicht vorgeschlagen weil es nicht zwingend notwendig ist.

Auch hier ein kleiner Hinweis: Lokal wirst du damit keinerlei Probleme haben, da spielt die Ladezeit keine Rolle. Aber bitte sehe davon ab, den * Selektor in einer produktiven Seite zu verwenden, bzw. nur recht spärlich.