jQuery Selector Optimizer

Last Updated Oktober 21, 2026
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

Bei den meisten WalkMe Items ist es möglich, jQuery-Selektoren zur Auswahl von Elementen frei einzugeben. Die jQuery-Bibliothek existiert seit einiger Zeit, aber ihre Syntax und die Art des Schreibens von Selektoren hat sich im Laufe der Zeit verändert.

Für Benutzer, die mit der neuesten Syntax nicht vertraut sind und eine veraltete Schreibweise für jQuery-Selektoren verwenden, kann dies manchmal zu einer längeren Auswertungszeit führen. Dies wird zu einem Problem, wenn Benutzer viele Inhalte mit altmodischen Selektoren haben.

Wir möchten die Leistung von WalkMe bei der Suche nach Elementen auf der Seite verbessern und Ihnen helfen, effizientere Selektoren zu schreiben.

Der „jQuery Optimizer“ erkennt, ob ein bestimmter Selektor, den Sie geschrieben haben, mit einer moderneren Syntax umgeschrieben werden kann, wodurch eine schnellere Auswertung möglich ist. Wenn dies der Fall ist, wird der Wert im Feld mit dem optimierten Selektor automatisch aktualisiert, wobei die Möglichkeit bleibt, die Änderung manuell rückgängig zu machen.

jQuery Cheatsheet

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

Funktionsweise

Diese Funktion ist automatisch für jedes Deployable verfügbar, das die Option „Definieren Sie, wie das Element identifiziert werden soll“ in den Einstellungen des jeweiligen Deployables aufweist:

Optimierungsbeispiele

Vor der Optimierung Nach der Optimierung
[class= foo=""] .foo
[class= foo="" bar"] .foo.bar
[id= foo=""] #foo
[class= foo="" bar"] [id= foo=""] .foo #bar
[class= foo=""].bar:not([class= foo-bar=""]) .foo.bar:not(.foo-bar)
[class= foo=""][class= bar=""]:not([class= foo-bar=""]) .foo.bar:not(.foo-bar)

Schritte zur Verwendung des JQuery Optimizers

  1. Öffnen Sie ein beliebiges Deployable mit einem ausgewählten Element.
  2. Klicken Sie auf die Registerkarte Selected Element (Ausgewähltes Element):
  3. Wählen Sie den jQuery-Selektor im Abschnitt „Definieren Sie, wie das Element identifiziert werden soll“ aus:
  4. Füllen Sie den auf altmodische Weise geschriebenen Wert ein, zum Beispiel: [class= foo="" bar"], und klicken Sie aus dem Eingabefeld heraus:
  5. Beobachten Sie, wie die Magie Ihres Selektors optimiert wird!

Technische Hinweise

Der Optimierer kann Backslashes aus IDs mit Sonderzeichen entfernen, was die Shorthand-#id-Selektoren beschädigt.

Warum dies passiert

Sonderzeichen wie Doppelpunkte haben eine reservierte Bedeutung in CSS- und jQuery-Selektoren, zum Beispiel in :hover. Wenn eine ID wörtliche Sonderzeichen enthält, wie workflow:contacts:0:sections:0:titleSection, liest der Parser sie als Syntax anstatt als Teil der ID und macht den Selektor ungültig.

So beheben Sie sie

Fügen Sie einen Backslash vor jedem Sonderzeichen hinzu:

  • Vorher: #workflow:contacts:0:sections:0:titleSection
  • Nach: #workflow\:contacts\:0\:sections\:0\:titleSection

Alternative

Verwenden Sie stattdessen das Attributselektorformat, bei dem kein Escaping erforderlich ist: [id= workflow:contacts:0:sections:0:titlesection=""]

War dies hilfreich?

Vielen Dank für Ihr Feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×
×