Seleccionar enlaces con fragmentos (href=»#») con jQuery jQuery
Los identificadores de fragmento, o simplemente fragmentos, son pequeñas cadenas de texto que aparecen al final de las URLs después del símbolo #
(almohadilla o hash). Estas cadenas identifican a un recurso subordinado a un recurso principal.
En el caso documentos HTML, los fragmentos identifican a una sección del documento, generalmente mediante el uso de anclajes o puntos de fijación:
<a href="http://sitio.com/pagina.html#seecion-3">
Ir a la sección 3 de pagina.html
</a>
Seleccionar estos enlaces con jQuery es muy sencillo mediante los selectores de atributo. Por ejemplo, podemos seleccionar todos los enlaces que contengan #
en la URL:
var links = $( 'a[href*="#"]' );
Podríamos excluir los enlaces que consistan sólo en #
(<a href="#">
) de la selección anterior:
var links = $( 'a[href*="#"]:not([href="#"])' );
O, por poner otro ejemplo, seleccionar un enlace con un hash concreto:
var links = $( 'a[href*="#seccion-45"]' );
Pero la cuestión principal por la que quería escribir este post no era por algo tan sencillo sino por avisar de un bug que había en jQuery y que hacía funcionar la selección de enlaces con fragmentos utilizando una sintaxis incorrecta que no utiliza las comillas para el valor del atributo href
.
Por ejemplo, esta expresión funcionaba:
var links = $( 'a[href*=#seccion-45]' );
Pero la sintaxis correcta sería:
var links = $( 'a[href*="#seccion-45"]' );
Este bug fue solucionado en jQuery 1.12 y a partir de esta versión la selección de enlaces con #
que no utilicen las comillas generan avisos del tipo:
Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])
Lamentablemente Internet está repleto de ejemplos que utilizan la sintaxis incorrecta y que ya no funcionarán. WordPress se vio afectado tras la versión 4.5 cuando incluyó jQuery 1.12. Así que si os véis con este error, ya sabéis el motivo y como solucionarlo 😉