Help Center
Willkommen beim hilfezentrum von WalkMe

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

jQuery selectors (jQuery-Selektoren)

Last Updated Juni 25, 2024
jQuery sollte nur für Edge Cases verwendet werden.

Wir empfehlen, jQuery so wenig wie möglich zu verwenden. Webanwendungen ändern sich ständig und kleine Updates der Benutzeroberfläche und des Seitenaufbaus können jQuery außer Kraft setzen.

Die integrierte Elementauswahl von WalkMe passt sich ohne die Verwendung von jQuery an Änderungen in der zugrunde liegenden Anwendung an.

Kurzübersicht

jQuery ist eine Javascript-Bibliothek, die zur Manipulation einer HTML-Seite verwendet werden kann. CSS-Selektoren ermöglichen es Ihnen, Elemente in der HTML-Struktur anhand ihrer Merkmale wie z. B. ID, Klasse, Typ, Attribute oder Attributwerte zu identifizieren.

Die häufigsten jQuery-Selektoren im WalkMe-Editor werden wie folgt verwendet:

  • Onboarding-Ziele erstellen: Erstellen Sie Onboarding-Ziele basierend auf einem Bildschirmelement
  • Selected Element Launchers: Fügen Sie den jQuery Selector in die Registerkarte Selected Element eines Launchers hinzu
  • Werte erfassen: Erfassen Sie einen Wert aus einer Benutzervariablen oder einem Text auf dem Bildschirm, um ihn in eine dynamische Ankündigung einzubinden oder ihn in einer Regel zu verwenden.
  • Seitenbedingungen überprüfen: Veranlassen Sie WalkMe an, die Attribute eines Elements auf dem Bildschirm zu analysieren, um sie als Regeltyp in der Rule Engine zu verwenden.

Funktionsweise

Finden Sie das Element im HTML, indem Sie mit der rechten Maustaste auf dieses klicken und „Inspect Element“ auswählen. Das Element wird auf dem Bildschirm und im Entwicklerbereich (Developer Panel) markiert. Identifizieren Sie die eindeutigen Merkmale des Elements (wie Ort, Klasse, ID und Stil), um Ihren jQuery-Selektor zu erstellen. Elemente können anhand ihrer Position oder Attribute (Klasse, ID und Stil) identifiziert werden.

🎓 Digital Adoption Institute

Schritt 1: Erstellen Sie den jQuery Selector

Die grundlegende Syntax für die Verwendung von jQuery-Elementen in WalkMe ist: Element – Selector – Value

Nach der Identifizierung des Elements erstellen Sie einen jQuery-Selektor, der spezifisch das anschaut, was Sie interessiert.

Nachstehend folgen einige Beispiele für jQuery-Selektoren:

  • ul element with id create-account: ul#create-account.
  • ul elements with class nav: ul.nav.
  • ul elements with class nav and class fl type: ul.nav.fl.

Sehen Sie sich unten eine Liste der nützlichen jQuery Selectors an.

Erstellen Sie jQuery mit Ihren WalkMe-Daten

Sie können jetzt vorhandene WalkMe-Daten zugunsten eines jQuery-Selektors verwenden.

Dies kann erreicht werden, indem Sie dem gewünschten Selektor „${wm-data-key}“ hinzufügen. Zum Beispiel: Der Selektor: [id="${key}"], wird {key}das „$“ durch die tatsächlichen WalkMe-Daten ersetzt und sieht wie folgt aus: [id=”value”].

Schritt 2: Testen Sie Ihren Selector in der Konsole

  1. Geben Sie in der Befehlszeile im Entwickler-Bedienfeld wmjQuery(“”) mit Ihrem jQuery-Selektor zwischen den “” ein und drücken Sie die Eingabetaste.
  2. Wenn Ihre Abfrage den gewünschten Wert zurückgibt, funktioniert Ihr Selektor!
    • Hinweis: Um die ausgewählten Elemente auf dem Bildschirm zu sehen, klicken Sie auf More…
  3. Bewegen Sie den Mauszeiger über die zurückgegebenen Objekte, um das hervorgehobene Element anzuzeigen.

Schritt 3: Verwenden Sie jQuery Selectors in WalkMe

Je nachdem, wie Sie das jQuery-Element verwenden möchten, kann jQuery in WalkMe in folgenden Bereichen eingesetzt werden:

  • Verwenden Sie das jQuery-Element, um ein Element für einen Schritt oder Launcher über die Registerkarte „Selected Element“ (Ausgewähltes Element) im Optionsmenü zu identifizieren.
  • Verwenden Sie das jQuery-Element, um den nächsten Schritt in einem Walk-Thru auszulösen, wenn Sie im Menü Zusätzliche Schritt-Auslöser angeklickt oder den Mauszeiger bewegt
    Anmerkung

    habenDie Verwendung eines nicht eindeutigen Selektors, um das Klicken oder den Mauszeiger auf mehrere Elemente gleichzeitig zu erkennen, funktioniert möglicherweise nicht wie erwartet.

  • Verwenden Sie das jQuery-Element, um einen Wert auf dem Bildschirm zu erfassen und als dynamischen Text im Rich Text Editor in einer Schritt-Sprechblase oder einem ShoutOut zu verwenden.
  • Verwenden Sie das jQuery-Element, um ein Ziel in der Registerkarte „Goal“ (Ziel) zu erstellen.
  • Verwenden Sie den jQuery-Selektor in der Rule Engine als Regeltyp (ähnlich wie jQuery als Regeltyp für Bildschirmelemente verwendet wird).
Tipp

Denken Sie daran, dass jQuery in Ihren WalkMe-Builds sparsam und immer in Kombination mit leichteren Bedingungen verwendet werden sollte. Weitere Informationen finden Sie im folgenden Artikel: WalkMe Performance Best Practices

Verfügbare Rule Engine jQuery Operators:

  • True: Bedeutet, dass mindestens ein Element gefunden wurde
  • False: Bedeutet, dass keine Elemente gefunden wurden
  • Visible: Bedeutet, dass das Element sichtbar ist
  • Text Is/Is Not: Bedeutet, dass der Text der Texteingabe entspricht
    • Hinweis: Wenn der Selector mehr als ein Element zurückgibt, wird der Text aller Elemente als ein Element zusammengefasst.
  • Greater Than/Less Than: Bedeutet, dass der Wert über oder unter einer ganzen Zahl liegt
  • Like/Not Like: Bedeutet eine komplizierte Textsyntax
  • Length Is/Is Not/Greater Than/Less Than: Bedeutet gleich, größer oder kleiner als eine ganze Zahl
    • Wird verwendet, um abzufragen, wie viele Elemente die Abfrage zurückgibt.
    • Die genaue Abfragelänge können Sie in der Konsole herausfinden: wmjQuery("element.value").length
Anmerkung

Der Editor von WalkMe unterstützt nur Selektoren, die in der jQuery-Syntax bis zu der in jQuery 1.8.3 verwendeten Syntax geschrieben sind. Sie können jedoch jede Version von jQuery für andere Zwecke auf Ihrer Website verwenden, ohne einen Konflikt mit der WalkMe-Version von jQuery (wmjQuery) befürchten zu müssen.

Wir empfehlen, auch den jQuery Selector Optimizer von WalkMe zu verwenden.

Nützliche jQuery-Selektoren

Abfrage Beschreibung
Element Abfragen eines Elements
element[attribute] Abfragen eines Attributs eines Elements
element[attribute][attribute] Abfragen mehrerer Attribute eines Elements
element[attribute="attribute value"] Abfragen eines Attributs eines Elements und dessen Wert
element[attribute^="text"] Abfragetext am Anfang eines Attributs
element[attribute*="text"] Abfragetext, der in einem Attribut enthalten ist
element[attribute!="text"] Abfragetext, der von einem Attribut ausgeschlossen ist
element child-element Abfragen des untergeordneten Elements eines Elements (Leerzeichen zeigt an, dass das erste Element das übergeordnete Element des zweiten ist)
element:checked Abfragen des Status eines Kontrollkästchens (markiert oder nicht markiert)
[element='']:visible Abfragen, ob ein Element sichtbar ist
element:contains(Text) Abfrageelement enthält Text
element:eq(#) Abfragen spezifischer Ergebnisse in Reihenfolge (Zählung beginnt bei 0)
jQuery Cheatsheet

Weitere Tipps und Beispiele von jQuery finden Sie in unserem jQuery Cheatsheet

Testen Ihrer jQuery-Selektoren

Bei der Auswahl eines jQuery-Selektors ist es ratsam, mehrere zu vergleichen. Dadurch können Sie sicherstellen, dass Sie denjenigen auswählen, der die geringsten Auswirkungen auf die Leistung Ihrer Website/Anwendung hat. Führen Sie dazu die folgenden Schritte aus:

  1. Öffnen Sie die Entwicklertools Ihres Webbrowsers
  2. Gehen Sie zur Registerkarte „Dev Tools“ der Konsole
  3. Geben Sie Folgendes in die Konsole ein:
    • var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
  4. Klicken Sie auf Enter
  5. Führen Sie diesen Befehl mehrmals in der Konsole aus, um ungefähr die durchschnittliche Zeit zu sehen, die er benötigt.
  6. Führen Sie denselben Befehl mit einigen alternativen jQuery-Selektoren aus und wählen Sie denjenigen, der am wenigsten Zeit für die Ausführung benötigt.
Anmerkung

  • Falls Shadow DOM-Support vorhanden ist, sollten Sie Shadow DOM-Elemente im Editor erfassen und JQuery zu deren Identifizierung verwenden können
  • Sie werden wmjQuery aber nicht in der DevTools-Konsole ausführen können. Verwenden Sie stattdessen diese Syntax:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')

jQuery in WalkMe Share

War dies hilfreich?

Vielen Dank für Ihr Feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×