zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Eltern-Element ausblenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #31 (permalink)  
Alt 25.10.2018, 15:19
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@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.
__________________

Mit Zitat antworten
Sponsored Links
  #32 (permalink)  
Alt 25.10.2018, 15:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
  #33 (permalink)  
Alt 25.10.2018, 16:11
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

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
__________________

Mit Zitat antworten
  #34 (permalink)  
Alt 25.10.2018, 16:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.

Code:
/*HIER COPY-PASTE VON JQUERY CODE*/

$( document ).ready(function() {
  //JS Grundlagen: Code erst ausführen wenn auch alles da ist. 
  $( 'div:has(> * > p[foo^=lorem])' ).hide();
});
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #35 (permalink)  
Alt 25.10.2018, 16:45
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du kannst im JS kein HTML verwenden (also kein <script src="..." > )

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



Zitat:
Zitat von cloned Beitrag anzeigen

Code:
$( document ).ready(function() {
  //JS Grundlagen: Code erst ausführen wenn auch alles da ist. 
  $( 'div:has(> * > p[foo^=lorem])' ).hide();
});

Dies zusammen mit

Code:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
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"?
__________________

Mit Zitat antworten
  #36 (permalink)  
Alt 25.10.2018, 16:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Aber genau das steht doch auf der von Dir zitierten Seite:
https://api.jquery.com/has-selector/
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)



Zitat:
Zitat von AndreasB Beitrag anzeigen
Zur Bewertung des Verfahrens mit ":has":

Haltet ihr es für besser als das zuvor eingesetzte mit "parent.node"?
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?
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #37 (permalink)  
Alt 25.10.2018, 18:16
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@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:


Code:
// ==UserScript==
// @name         Spiegel: Eltern- und Vorfahren-Elemente ausblenden
// @author       Basti & Cloned & Andreas 
// @include      *spiegel.de*
// @require      https://code.jquery.com/jquery-3.3.1.js
 // ==/UserScript==


/*
Manual: https://api.jquery.com/has-selector/
Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Browser_compatibility

Alternative zum Verwenden von "hide()":
$( '*:has(> * > * > .spplus)' ).addClass( 'eliminate' );
Danach müssen noch per CSS alle Elemente mit class="eliminate" ausgeblendet werden.
.eliminate { display: none !important } 
*/

 
//Spiegel Plus
$( '*:has(> * > * > .spplus)' ).hide();
$( '*:has(> * > * > [title="SPIEGEL+"])' ).hide();


//Fußball
$( '*:has(> * > * > [href*="/sport/fussball/"])' ).hide();

//Anzeigen
$( '*:has(> * > * > .anz)' ).hide();
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!
__________________


Geändert von AndreasB (26.10.2018 um 11:37 Uhr)
Mit Zitat antworten
  #38 (permalink)  
Alt 29.10.2018, 11:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
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".
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.


Zitat:
Zitat von AndreasB Beitrag anzeigen
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.
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.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Man kann sogar aus CSS gewohnte Syntax verwenden.
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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery: Element beim Scrollen ausblenden DavidNF Javascript & Ajax 2 21.09.2011 10:48
Element ausblenden, wenn anderes eingeblendet wird vik.alive Javascript & Ajax 13 11.05.2009 14:16
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04
element ausblenden, aber klickbar belassen antiheld2000 CSS 4 07.05.2007 17:22
Element mit Javascript ein- und ausblenden yellowfox Javascript & Ajax 1 17.08.2006 17:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:37 Uhr.