jQuery Selector Optimizer

Last Updated octubre 21, 2026
jQuery solo se puede usar para casos extremos

Recomendamos utilizar jQuery lo menos posible. Las aplicaciones web cambian constantemente y pequeñas actualizaciones en la interfaz de usuario y en la estructura de página pueden hacer que el código de jQuery deje de funcionar.

La selección predeterminada de elementos de WalkMe se adapta a los cambios en la aplicación subyacente sin depender de jQuery.

Breve descripción general

Con la mayoría de los elementos de WalkMe, es posible introducir libremente los selectores de jQuery para seleccionar elementos. La biblioteca de jQuery ha existido durante bastante tiempo, pero su sintaxis y forma de escribir los selectores ha cambiado con el tiempo.

Para los usuarios que no están familiarizados con la última sintaxis y utilizan una forma antigua de escribir selectores de jQuery, esto a veces puede causar un tiempo de evaluación más largo. Esto se convierte en un problema cuando los usuarios tienen mucho contenido con selectores anticuados.

Queremos mejorar el rendimiento de WalkMe para encontrar elementos en la página y ayudarte a escribir selectores más eficientes.

El "jQuery Optimizer" detecta si un selector específico que has escrito se puede reescribir con una sintaxis más moderna que evalúe más rápido. Cuando lo hace, actualiza automáticamente el valor en el campo con el selector optimizado, dejando la opción de restablecer el cambio manualmente.

Guía rápida de jQuery

Para obtener consejos y ejemplos de jQuery, consulta nuestra Hoja de trucos de jQuery.

Cómo funciona

Esta función está disponible automáticamente para cualquier desplegable que tenga la opción "Definir cómo identificar el elemento" dentro de los ajustes de ese desplegable en particular:

Ejemplos de optimización

Antes de la optimización Después de la optimización
[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)

Pasos para utilizar el Optimizador de JQuery.

  1. Abre cualquier desplegable con un elemento seleccionado.
  2. Haz clic en la pestaña Elemento seleccionado:
  3. Selecciona el selector de jQuery en la sección "Define cómo identificar el elemento":
  4. Rellena el valor escrito a la antigua, por ejemplo: [class= foo="" bar"], y haz clic fuera del campo de entrada:
  5. ¡Mira la magia de la optimización del selector!

Notas técnicas

El optimizador puede eliminar las barras invertidas de los ID que contienen caracteres especiales, lo que rompe los selectores de shorthand #id.

Por qué sucede esto

Los caracteres especiales como los dos puntos tienen un significado reservado en los selectores de CSS y jQuery, por ejemplo en :hover. Si un ID contiene caracteres especiales literales, como workflow:contacts:0:sections:0:titleSection, el analizador los lee como sintaxis en lugar de como parte del ID, rompiendo el selector.

Cómo solucionarlo

Añade una barra invertida antes de cada carácter especial:

  • Antes: #workflow:contacts:0:sections:0:titleSection
  • Después: #workflow\:contacts\:0\:sections\:0\:titleSection

Alternativa

Utiliza en su lugar el formato del selector de atributos, que no requiere escape: [id= workflow:contacts:0:sections:0:titlesection=""]

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Explore our community
×
×