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 selector de jQuery es una cadena que se dirige a un elemento HTML cuando la selección de elementos predeterminada de WalkMe no puede. Cada página está hecha de HTML y cada elemento visible —botones, encabezados, formularios, imágenes— está representado en esa estructura HTML. Los selectores de jQuery permiten que WalkMe localice elementos utilizando clases, ID u otros atributos.
Es posible que necesites jQuery si:
Antes de crear un selector de jQuery, verifica la pestaña Precisión para confirmar si la selección nativa se puede mejorar.
Haz clic con el botón derecho en el elemento que necesitas seleccionar y selecciona Inspeccionar (Chrome/Safari) o Inspeccionar elemento (Firefox/IE).
Esto abre la consola de desarrollador del navegador, lo que te permite ver el HTML de la página y localizar el elemento exacto que WalkMe debe seleccionar.
Al inspeccionar el texto "Bienvenido a Soporte de WalkMe", se resalta la línea HTML:
<h2 class="site-header__title">
También puedes hacer clic en el icono del cursor en el encabezado de DevTools para pasar el cursor sobre los elementos y saltar directamente a su representación HTML. Al pasar el cursor, se resalta la línea HTML correspondiente en azul. Al hacer clic, se ancla el inspector a ese elemento.
Los elementos comunes de HTML incluyen div, a (enlace), h2, p, form, input, img. Los elementos a menudo contienen clases, ID o atributos que los describen y se pueden utilizar en su selector. Los tipos de elementos son útiles para la orientación, pero no siempre se requieren en el selector final.
Los descriptores, las clases, los identificadores y los atributos determinan el aspecto y el comportamiento de esos elementos en una página. Al escribir jQuery, los elementos siempre deben preceder a cualquier descriptor. Esto significa que nunca debes colocar un símbolo de ningún tipo antes de un elemento.
Las clases son los descriptores más comunes. En HTML, aparecen como class="example". En jQuery, las clases utilizan la notación de punto:
.site-header__title
Si un elemento tiene un ID, prefiérelo en lugar de una clase porque los ID son más específicos. Los ID aparecen en HTML como id="name" y utilizan # en jQuery.
En el ejemplo a continuación, se <input id="hkb-search" class="…">puede seleccionar la barra de búsqueda con el selector: #hkb-search
Los elementos dentro de iFrames requieren un objeto de contexto. Utiliza esta plantilla:
{"element": "#yourElement", "context": "iframe#iframeSelector"}
Ejemplo:
{"element": "h2.mainTitle", "context": "iframe#Main"}
Para probar en DevTools:
wmjQuery("#yourElement", wmjQuery("iframe#iframeSelector").contents())
wmjQuery('yourSelector')
A partir del ejemplo anterior, podemos introducir:
wmjQuery('.site-header__title')
La consola devuelve un objeto que contiene: length — cuántos elementos coincidieron con tu selector
Devuelve con una longitud de más de 1, lo que significa que se encontraron varios elementos que coinciden con el selector. Con cualquier resultado superior a 1, nos gustaría hacer que el selector fuera más
específico.
En nuestro ejemplo anterior, probar .site-header__title devuelve length: 1 y resalta el elemento seleccionado.
Puedes pasar el cursor sobre cualquier elemento devuelto en los resultados de DevTools para confirmar que resalta el elemento correcto en la página.
Si un selector largo devuelve un signo de exclamación rojo en el Motor de reglas, puedes aislar el problema dividiendo el selector en partes más pequeñas y probando cada parte.
Por ejemplo, considera el selector incorrecto:
div.ht-container form.hkb-site-serch
Para solucionarlo, comienza con el primer elemento y construye el selector paso a paso:
Ahora añade la parte final: .hkb-site-serch. Tan pronto como lo añades, el Motor de reglas cambia de una marca de verificación verde a un signo de exclamación rojo. Cuando inspecciones el HTML, verás el problema: el nombre de la clase está mal escrito. Debe ser .hkb-site-search.
Una vez que corrijas el error tipográfico, el selector completo
div.ht-container form.hkb-site-search
devuelve una marca de verificación nuevamente. Eso significa que el selector ahora es válido.
Este método te ayuda a identificar rápidamente qué parte de un selector se ha escrito incorrectamente o que ya no coincide con la página.
El mismo método funciona para Lanzadores, SmartTips y cualquier regla que admita la selección de jQuery.
Si un elemento no tiene una clase o ID, puedes seleccionarlo utilizando cualquiera de sus atributos.
El formato básico es:
[attribute= value=""]
Por ejemplo, el logotipo de soporte de WalkMe no tiene una clase o ID, pero su HTML incluye el atributo:
href="https://support.walkme.com"
Puedes utilizar este atributo para apuntar al logotipo:
[href= https:="" .walkme.com"]
El mismo elemento también contiene otro atributo:
data-ht-sitetitle="Soporte de WalkMe"
Puedes apuntar a esto utilizando:
[data-ht-sitetitle= walkme="" Support"]
Al seleccionar un atributo que no sea una clase o ID, incluye siempre el tipo de elemento antes del atributo. Esto ayuda a WalkMe a reducir la búsqueda y mejorar el rendimiento. Para el logotipo de Soporte, el selector correcto es:
a.[href= https:="" .walkme.com"]
En HTML, a identifica un enlace y href identifica el destino del enlace. En este caso, el logotipo es un enlace a la página de soporte de WalkMe.
Aunque se pueden seleccionar atributos como clase e id utilizando el mismo [attribute= value=""]formato, es más eficiente utilizar los accesos directos .className y #idName siempre que sea posible.
La orientación solo por atributo puede devolver más de un resultado. Por ejemplo, pruebas:
wmjQuery('[href= https:="" .walkme.com"]!=
en support.walkme.com devuelve length: 2.
Esto se debe a que tanto el logotipo de WalkMe como el enlace "Inicio" comparten el mismo atributo href.
Puedes intentar añadir el tipo de elemento, a, pero ambos elementos son enlaces, por lo que:
a.[href= https:="" .walkme.com"]
de todos modos devuelve dos coincidencias.
Para que el selector sea más específico, utiliza la estructura padre-hijo que se encuentra en el HTML. En DevTools, puedes expandir líneas de HTML para ver qué elementos contienen otros. El elemento que lo contiene es el padre, y el elemento anidado es el hijo.
Por ejemplo, el padre del logotipo de WalkMe es:
div.site-logo
El padre del enlace "Inicio" es un elemento diferente: li con atributos adicionales
Debido a que los padres difieren, puedes hacer que el selector sea más específico incluyendo tanto el padre como el hijo. Los selectores padre-hijo se escriben con un espacio entre ellos.
Para apuntar al enlace "Inicio":
li [href= https:="" .walkme.com"]
Al probar este selector, se devuelve una sola coincidencia, identificando correctamente el texto "Inicio".
Para apuntar solo al logotipo, utiliza su padre conocido:
div.site-logo a[href= https:="" .walkme.com"]
Comprender la jerarquía padre-hijo es una de las formas más fiables de refinar los selectores cuando varios elementos comparten atributos similares.
Los modificadores te permiten reducir aún más un selector de jQuery añadiendo reglas al final del selector. Aunque se pueden combinar varios modificadores, evita utilizar más de dos para que los selectores sean fáciles de mantener.
Ejemplos:
h2:contains(Bienvenido a WalkMe):visible
Selecciona un elemento h2 que contenga el texto "Bienvenido a WalkMe" y sea visible en la pantalla.
.hkb-site-search:has( )[type= text=""])
Selecciona el elemento con la clase hkb-site-search que contiene un elemento anidado con el atributo type="text".
form.hkb-site-search input:eq(0)
:eq(n) selecciona el n-ésimo elemento en una lista con indexación basada en cero. eq(0) es la primera entrada de coincidencia dentro del formulario.
form.hkb-site-search input:last
:last selecciona el último elemento de entrada coincidente. Utiliza :first para seleccionar el primero.
Aprende a utilizar un modificador de elementos hermanos para encontrar elementos hermanos.
Los ID dinámicos son ID que cambian cada vez que se carga la página. Por lo general, se ven como cadenas alfanuméricas largas, por ejemplo:
id="00N00000067211_ilecell"
Debido a que este valor cambia en la actualización, cualquier selector que utilice el ID completo se romperá. Evita utilizar ID completamente dinámicos siempre que sea posible.
Si debes apuntar a un elemento con un ID dinámico, identifica la parte estable del ID, algo legible o coherente, como "ilecell" en el ejemplo anterior. Luego utiliza un selector de atributo parcial:
[id*= ilecell=""]
El símbolo *= significa "contiene". Esto le dice a WalkMe que busque cualquier ID que contenga ilecell, incluso si el resto del ID cambia.
Los selectores parciales pueden coincidir con varios elementos. Para evitar coincidencias no deseadas, combina tu selector de ID parcial con otra parte de la estructura o los atributos del elemento. Por ejemplo:
[id*= ilecell=""].inlineEditWrite
o
.dataCol.inlineEditWrite[id*= ilecell=""]
Este enfoque mantiene el selector estable al tiempo que garantiza que coincida con el elemento correcto.