Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
Ein jQuery-Selektor ist eine Zeichenfolge, die auf ein HTML-Element abzielt, wenn die Standardelementauswahl von WalkMe dies nicht kann. Jede Seite besteht aus HTML-Code und jedes sichtbare Element – Schaltflächen, Header, Formulare, Bilder – wird in dieser HTML-Struktur dargestellt. Mit jQuery-Selektoren kann WalkMe Elemente mithilfe von Klassen, IDs oder anderen Attributen finden.
Möglicherweise benötigen Sie jQuery, wenn:
Bevor Sie einen jQuery-Selektor erstellen, überprüfen Sie die Registerkarte Präzision, um zu bestätigen, ob die native Auswahl verbessert werden kann.
Klicken Sie mit der rechten Maustaste auf das Element, das Sie ansprechen möchten, und wählen Sie Inspizieren (Chrome/Safari) oder Element inspizieren (Firefox/IE) aus.
Dadurch wird die Entwicklerkonsole des Browsers geöffnet, wo Sie den HTML-Code der Seite anzeigen und genau das Element finden können, das WalkMe ansprechen soll.
Beim Überprüfen des Textes „Willkommen beim WalkMe-Support“ wird die HTML-Zeile hervorgehoben:
<h2 class="site-header__title">
Sie können auch auf das Cursor-Symbol im DevTools-Header klicken, um den Mauszeiger über Elemente zu bewegen und direkt zu ihrer HTML-Darstellung zu springen. Durch das Bewegen des Mauszeigers wird die entsprechende HTML-Zeile blau hervorgehoben. Durch Klicken wird der Inspektor an diesem Element verankert.
Zu den gängigen HTML-Elementen gehören div, a (Link), h2, p, form, input, img. Elemente enthalten oft Klassen, IDs oder Attribute, die sie beschreiben und in Ihrem Selektor verwendet werden können. Elementtypen sind hilfreich zur Orientierung, werden aber nicht immer im endgültigen Selektor benötigt.
Descriptoren wie Klassen, IDs und Attribute bestimmen, wie diese Elemente aussehen und wie sie sich auf einer Seite verhalten. Wenn Sie jQuery schreiben, sollten die Elemente immer vor den Deskriptoren stehen. Das bedeutet, dass Sie niemals ein Symbol irgendeiner Art vor ein Element setzen sollten.
Klassen sind die häufigsten Deskriptoren. In HTML werden sie als class="example" angezeigt. In jQuery verwenden Klassen die Punkt-Notation:
.site-header__title
Wenn ein Element eine ID hat, ziehen Sie es einer Klasse vor, da IDs spezifischer sind. IDs werden in HTML als id="name" angezeigt und verwenden # in jQuery.
Im folgenden Beispiel kann die Suchleiste mit dem Selektor angesprochen werden: #hkb-search<input id="hkb-search" class="…">
Elemente innerhalb von iFrames erfordern ein Kontextobjekt. Verwenden Sie diese Vorlage:
{"element": "#yourElement", "context": "iframe#iframeSelector"}
Beispiel:
{"element": "h2.mainTitle", "context": "iframe#Main"}
So testen Sie in DevTools:
wmjQuery("#yourElement", wmjQuery("iframe#iframeSelector").contents())
wmjQuery('yourSelector')
Aus dem früheren Beispiel können wir Folgendes eingeben:
wmjQuery('.site-header__title')
Die Konsole gibt ein Objekt zurück, das Folgendes enthält: Länge — wie viele Elemente Ihrem Selektor entsprechen
Rückgaben mit einer Länge von mehr als 1 bedeuten, dass mehrere Elemente gefunden wurden, die dem Selektor entsprechen. Bei jedem Ergebnis über 1 möchten wir den Selektor noch weiter
spezifischer zu machen.
Aus unserem früheren Beispiel heraus gibt der Test von .site-header__title Länge: 1 zurück und hebt das ausgewählte Element hervor.
Sie können den Mauszeiger über jedes zurückgegebene Element in den DevTools-Ergebnissen bewegen, um zu bestätigen, dass das richtige Element auf der Seite hervorgehoben wird.
Wenn ein langer Selektor ein rotes Ausrufezeichen in der Regel-Engine zurückgibt, können Sie das Problem isolieren, indem Sie den Selektor in kleinere Teile aufteilen und jeden Teil testen.
Betrachten Sie beispielsweise den falschen Selektor:
div.ht-container form.hkb-site-serch
Um es zu beheben, beginnen Sie mit dem ersten Element und erstellen Sie den Selektor Schritt für Schritt:
Fügen Sie jetzt den letzten Teil hinzu: .hkb-site-serch. Sobald Sie es hinzufügen, ändert sich die Regel-Engine von einem grünen Häkchen in ein rotes Ausrufezeichen. Wenn Sie den HTML-Code überprüfen, sehen Sie das Problem: Der Klassenname ist falsch geschrieben. Es sollte .hkb-site-search lauten.
Sobald Sie den Tippfehler korrigiert haben, der vollständige Selektor
div.ht-container form.hkb-site-search
Gibt erneut ein Häkchen zurück. Das bedeutet, dass der Selektor jetzt gültig ist.
Diese Methode hilft Ihnen, schnell festzustellen, welcher Teil eines Selektors falsch geschrieben ist oder nicht mehr der Seite entspricht.
Die gleiche Methode funktioniert für Launcher, SmartTips und jede Regel, die die jQuery-Auswahl unterstützt.
Wenn ein Element keine Klasse oder ID hat, können Sie es mit einem seiner Attribute ansprechen.
Das Grundformat lautet:
[attribute= value=""]
Das WalkMe-Support-Logo hat beispielsweise keine Klasse oder ID, aber sein HTML-Code enthält das Attribut:
href="https://support.walkme.com"
Sie können dieses Attribut verwenden, um das Logo anzusprechen:
[href= https:="" .walkme.com"]
Das gleiche Element enthält auch ein weiteres Attribut:
data-ht-sitetitle="WalkMe Support"
Sie können dies angehen mit:
[data-ht-sitetitle= walkme="" Support"]
Wenn Sie ein Attribut ansprechen, das keine Klasse oder ID ist, fügen Sie den Elementtyp immer vor dem Attribut hinzu. Dies hilft WalkMe, die Suche einzugrenzen und die Leistung zu verbessern. Für das Support-Logo lautet der richtige Selektor:
A[href= https:="" .walkme.com"]
In HTML identifiziert a einen Link und href das Linkziel. In diesem Fall ist das Logo ein Link zur WalkMe-Support-Seite.
Obwohl Attribute wie class und id mit demselben [attribute= value=""]Format gezielt angesprochen werden können, ist es effizienter, die Shortcuts .className und #idName nach Möglichkeit zu verwenden.
Das Targeting allein nach Attribut kann mehr als ein Ergebnis liefern. Beispiel: Testen:
wmjQuery('[href= https:="" .walkme.com"]=
auf support.walkme.com gibt length: 2 zurück.
Dies liegt daran, dass sowohl das WalkMe-Logo als auch der Link „Home“ das gleiche href-Attribut aufweisen.
Sie könnten versuchen, den Elementtyp a hinzuzufügen, aber beide Elemente sind Links, also:
A[href= https:="" .walkme.com"]
gibt immer noch zwei Übereinstimmungen zurück.
Um den Selektor spezifischer zu gestalten, verwenden Sie die im HTML-Code gefundene Parent-Child-Struktur. In DevTools können Sie HTML-Zeilen erweitern, um zu sehen, welche Elemente andere enthalten. Das enthaltende Element ist das übergeordnete Element und das verschachtelte Element ist das untergeordnete Element.
Das Parent-Element des WalkMe-Logos ist beispielsweise:
div.site-logo
Das übergeordnete Element des Links „Startseite“ ist ein anderes Element: li mit zusätzlichen Attributen
Da sich die Parent-Elemente unterscheiden, können Sie Ihren Selektor spezifischer gestalten, indem Sie sowohl Parent als auch Child einbeziehen. Eltern-Kind-Selektoren werden mit einem Leerzeichen dazwischen geschrieben.
So richten Sie den Link „Startseite“ aus:
li [href= https:="" .walkme.com"]
Das Testen dieses Selektors ergibt eine einzige Übereinstimmung, die den Text „Home“ korrekt identifiziert.
Um stattdessen nur das Logo anzusprechen, verwenden Sie sein bekanntes übergeordnetes Element:
div.site-logo a[href= https:="" .walkme.com"]
Das Verständnis der Eltern-Kind-Hierarchie ist eine der zuverlässigsten Möglichkeiten, Selektoren zu verfeinern, wenn mehrere Elemente ähnliche Attribute aufweisen.
Mit Modifikatoren können Sie einen jQuery-Selektor weiter eingrenzen, indem Sie Regeln am Ende des Selektors hinzufügen. Obwohl mehrere Modifikatoren kombiniert werden können, sollten Sie vermeiden, mehr als zwei zu verwenden, damit Selektoren wartbar bleiben.
Beispiele:
h2:contains(Willkommen bei WalkMe):visible
Wählt ein h2-Element aus, das den Text „Willkommen bei WalkMe“ enthält und auf dem Bildschirm sichtbar ist.
.hkb-site-search:has([type= text=""])
Wählt das Element mit der Klasse hkb-site-search aus, das ein verschachteltes Element mit dem Attribut type="text" enthält.
form.hkb-site-search input:eq(0)
:eq(n) wählt das n-te Element in einer null-indizierten Liste aus. eq(0) ist die erste übereinstimmende Eingabe innerhalb des Formulars.
form.hkb-site-search input:last
:last wählt das letzte übereinstimmende Eingabeelement aus. Verwenden Sie :first, um das erste auszuwählen.
Erfahren Sie, wie Sie einen Geschwistermodifikator verwenden, um Geschwisterelemente zu finden.
Dynamische IDs sind IDs, die sich jedes Mal ändern, wenn die Seite geladen wird. Sie sehen in der Regel wie lange alphanumerische Zeichenfolgen aus, beispielsweise:
id="00N00000067211_ilecell"
Da sich dieser Wert bei der Aktualisierung ändert, wird jeder Selektor, der die vollständige ID verwendet, nicht mehr funktionieren. Vermeiden Sie die Verwendung vollständig dynamischer IDs nach Möglichkeit.
Wenn Sie ein Element mit einer dynamischen ID ansprechen müssen, identifizieren Sie den stabilen Teil der ID – etwas Lesbares oder Konsistentes, wie „ilecell“ im obigen Beispiel. Verwenden Sie dann einen partiellen Attribut-Selektor:
[id*= ilecell=""]
Das Symbol *= bedeutet „enthält“. Dies weist WalkMe an, nach jeder ID zu suchen, die ilecell enthält, auch wenn sich der Rest der ID ändert.
Teilselektoren können mit mehreren Elementen übereinstimmen. Um unbeabsichtigte Übereinstimmungen zu vermeiden, kombinieren Sie Ihren partiellen ID-Selektor mit einem anderen Teil der Struktur oder den Attributen des Elements. Beispiel:
[id*= ilecell=""].inlineEditWrite
Ebenfalls möglich:
.dataCol.inlineEditWrite[id*= ilecell=""]
Dieser Ansatz hält Ihren Selektor stabil und stellt gleichzeitig sicher, dass er dem richtigen Element entspricht.