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.
Un sélecteur jQuery est une chaîne qui cible un élément HTML lorsque la sélection d'élément par défaut de WalkMe ne peut pas le faire. Chaque page est faite de HTML et chaque élément visible — boutons, en-têtes, formulaires, images — est représenté dans cette structure HTML. Les sélecteurs jQuery permettent à WalkMe de localiser les éléments à l'aide de classes, d'identifiants ou d'autres attributs.
Vous pouvez avoir besoin de jQuery si :
Avant de construire un sélecteur jQuery, vérifiez l'onglet Précision pour confirmer si la sélection native peut être améliorée.
Cliquez avec le bouton droit sur l'élément que vous devez cibler et sélectionnez Inspecter (Chrome/Safari) ou Inspecter l'élément (Firefox/IE).
Cela ouvre la console de développeur du navigateur, vous permettant d'afficher le code HTML de la page et de localiser l'élément exact que WalkMe doit cibler.
L'inspection du texte « Bienvenue à l'assistance WalkMe » met en évidence la ligne HTML :
<h2 class="site-header__title">
Vous pouvez également cliquer sur l'icône du curseur dans l'en-tête DevTools pour passer sur les éléments et accéder directement à leur représentation HTML. Le survol met en évidence la ligne HTML correspondante en bleu. Un clic ancre l'inspecteur à cet élément.
Les éléments HTML courants comprennent div, a (lien), h2, p, form, input, img. Les éléments contiennent souvent des classes, des ID ou des attributs qui les décrivent et peuvent être utilisés dans votre sélecteur. Les types d'élément sont utiles pour l'orientation, mais ne sont pas toujours requis dans le sélecteur final.
Les descripteurs comme les classes, les identifiants et les attributs déterminent à quoi ressembleront ces éléments et leur comportement sur une page. Lorsque vous écrivez jQuery, les éléments doivent toujours précéder les descripteurs. Cela signifie que vous ne devez jamais placer un symbole avant un élément.
Les classes sont les descripteurs les plus courants. Dans HTML, ils apparaissent comme class="example". Dans jQuery, les classes utilisent la notation pointée :
.site-header__title
Si un élément a un identifiant, préférez-le à une classe, car les identifiants sont plus spécifiques. Les ID apparaissent dans HTML comme id="name" et utilisent # dans jQuery.
À partir de l'exemple ci-dessous, la barre de recherche <input id="hkb-search" class="…">peut être ciblée avec le sélecteur : #hkb-search
Les éléments dans les iFrames nécessitent un objet de contexte. Utilisez ce modèle :
{"element": "#yourElement", "context": "iframe#iframeSelector"}
Exemple :
{"element": "h2.mainTitle", "context": "iframe#Main"}
Pour tester dans DevTools :
wmjQuery("#yourElement", wmjQuery("iframe#iframeSelector").contents())
wmjQuery('yourSelector')
À partir de l'exemple précédent, nous pouvons saisir :
wmjQuery('.site-header__title')
La console renvoie un objet contenant : length — combien d'éléments correspondent à votre sélecteur
Un résultat d'une longueur supérieure à 1 signifie que plusieurs éléments correspondant au sélecteur ont été trouvés. Avec tout résultat supérieur à 1, nous aimerions rendre le sélecteur plus
spécifique.
À partir de notre exemple précédent, le test de .site-header__title renvoie la longueur : 1 et met en évidence l'élément sélectionné.
Vous pouvez passer la souris sur n'importe quel élément renvoyé dans les résultats de DevTools pour confirmer qu'il met en évidence l'élément correct sur la page.
Si un long sélecteur renvoie un point d'exclamation rouge dans le moteur de règles, vous pouvez isoler le problème en divisant le sélecteur en petits morceaux et en testant chaque partie.
Par exemple, considérez le sélecteur incorrect :
div.ht-container form.hkb-site-serch
Pour le résoudre, commencez par le premier élément et construisez le sélecteur étape par étape :
Ajoutez maintenant la partie finale : .hkb-site-serch. Dès que vous l'ajoutez, le moteur de règles passe d'une coche verte à un point d'exclamation rouge. Lorsque vous inspectez le code HTML, vous verrez le problème : le nom de la classe est mal orthographié. Ce devrait être .hkb-site-search.
Une fois que vous avez corrigé l'erreur de frappe, le sélecteur complet
div.ht-container form.hkb-site-search
renvoie à nouveau une coche Cela signifie que le sélecteur est désormais valide.
Cette méthode vous aide à identifier rapidement quelle partie d'un sélecteur est mal écrite ou ne correspond plus à la page.
La même méthode fonctionne pour les lanceurs, les SmartTips et toute règle qui prend en charge la sélection jQuery.
Si un élément n'a pas de classe ou d'identifiant, vous pouvez le cibler à l'aide de l'un de ses attributs.
Le format de base est :
[attribute= value=""]
Par exemple, le logo de l'assistance WalkMe n'a pas de classe ni d'identifiant, mais son HTML comprend l'attribut :
href="https://support.walkme.com"
Vous pouvez utiliser cet attribut pour cibler le logo :
[href= https:="" .walkme.com"]
Le même élément contient également un autre attribut :
data-ht-sitetitle="WalkMe Support"
Vous pouvez cibler cela en utilisant :
[data-ht-sitetitle= walkme="" Support"]
Lorsque vous ciblez un attribut qui n'est pas une classe ou un ID, incluez toujours le type d'élément avant l'attribut. Cela aide WalkMe à affiner la recherche et à améliorer les performances. Pour le logo d'assistance, le sélecteur correct est :
A[href= https:="" .walkme.com"]
En HTML, a identifie un lien et href identifie la destination du lien. Dans ce cas, le logo est un lien vers la page d'assistance WalkMe.
Bien que les attributs tels que la classe et l'id puissent être ciblés à l'aide du même [attribute= value=""] format, il est plus efficace d'utiliser les raccourcis .className et #idName dans la mesure du possible.
Le ciblage par attribut seul peut renvoyer plus d'un résultat. Par exemple, les tests :
wmjQuery('[href= https:="" .walkme.com"]!=
sur support.walkme.com, renvoie la longueur : 2.
Cela est dû au fait que le logo WalkMe et le lien « Accueil » partagent le même attribut href.
Vous pouvez essayer d'ajouter le type d'élément, a, mais les deux éléments sont des liens, donc :
A[href= https:="" .walkme.com"]
Renvoie toujours deux correspondances.
Pour rendre le sélecteur plus spécifique, utilisez la structure parent-enfant trouvée dans le code HTML. Dans DevTools, vous pouvez développer les lignes de HTML pour voir quels éléments en contiennent d'autres. L'élément conteneur est le parent et l'élément imbriqué est l'enfant.
Par exemple, le parent du logo WalkMe est :
div.site-logo
Le parent du lien « Accueil » est un élément différent : li avec des attributs supplémentaires
Comme les parents diffèrent, vous pouvez rendre votre sélecteur plus spécifique en incluant à la fois le parent et l'enfant. Les sélecteurs parent-enfant sont écrits avec un espace entre eux.
Pour cibler le lien « Accueil » :
li [href= https:="" .walkme.com"]
Le test de ce sélecteur renvoie une seule correspondance, identifiant correctement le texte « Accueil ».
Pour cibler uniquement le logo à la place, utilisez son parent connu :
div.site-logo a[href= https:="" .walkme.com"]
Comprendre la hiérarchie parent-enfant est l'un des moyens les plus fiables d'affiner les sélecteurs lorsque plusieurs éléments partagent des attributs similaires.
Les modificateurs vous permettent d'affiner davantage un sélecteur jQuery en ajoutant des règles à la fin du sélecteur. Bien que plusieurs modificateurs puissent être combinés, évitez d'en utiliser plus de deux pour garder les sélecteurs maintenables.
Exemples :
h2:contients(Bienvenue to WalkMe) :visible
Sélectionne un élément h2 qui contient le texte « Bienvenue à WalkMe » et est visible à l'écran.
.hkb-site-search:has([type= text=""])
Sélectionne l'élément avec la classe hkb-site-search qui contient un élément imbriqué avec l'attribut type="text".
form.hkb-site-search input:eq(0)
:eq(n) sélectionne le n-ème élément dans une liste indexée à partir de zéro. eq(0) est le premier élément de saisie correspondant dans le formulaire.
form.hkb-site-search input:last
:last sélectionne le dernier élément d'entrée correspondant. Utilisez :first pour sélectionner le premier.
Apprenez à utiliser un modificateur frère pour trouver des éléments frères.
Les ID dynamiques sont des ID qui changent à chaque fois que la page se charge. Ils ressemblent généralement à de longues chaînes alphanumériques, par exemple :
id="00N00000067211_ilecell"
Étant donné que cette valeur change à l'actualisation, tout sélecteur utilisant l'ID complet sera interrompu. Évitez d'utiliser des ID entièrement dynamiques dans la mesure du possible.
Si vous devez cibler un élément avec un ID dynamique, identifiez la partie stable de l'ID : quelque chose de lisible ou de cohérent, tel que « ilecell » dans l'exemple ci-dessus. Utilisez ensuite un sélecteur d'attribut partiel :
[id*= ilecell=""]
Le symbole *= signifie « contient ». Cela indique à WalkMe de rechercher tout identifiant qui contient ilecell, même si le reste de l'identifiant change.
Les sélecteurs partiels peuvent correspondre à plusieurs éléments. Pour éviter les correspondances involontaires, combinez votre sélecteur d'ID partiel avec une autre partie de la structure ou des attributs de l'élément. Par exemple :
[id*= ilecell=""].inlineEditWrite
or
.dataCol.inlineEditWrite[id*= ilecell=""]
Cette approche maintient la stabilité de votre sélecteur tout en veillant à ce qu'il corresponde à l'élément correct.