jQuery this.hash Comportamiento en enlaces de anclaje de página

Question

Tengo una pregunta acerca de cómo funciona this.hash en enlaces de anclaje de página en jQuery.

Necesito procesar el atributo de hash cada vez que el usuario hace clic en ese enlace.

<a href="#foo" class="inpageLink">Click Me!<"/a> 
... 
... 
<a id="foo"></a> 
<h3>Target Location</h3> 

Para el fragmento HTML anterior, cuando obtengo el atributo hash, todo funciona bien.

$('.inpageLink').click(function(){ 
    var target = $(this.hash); 
    if (target.length != 0) { 
     alert("found target" + this.hash); 
    } 
}) 

Sin embargo, cuando uso atributo de nombre en lugar de atributo de identificación para el objetivo, this.hash devuelve un objeto nulo.

<a href="#bar" class="inpageLink">Click Me!</a> 
<a name="bar"></a> 
<h3>Target Location</h3> 

En este caso, el evento click no activa la alerta.

The full example is here

¿Puede alguien explicar lo que me falta aquí o si esta es la forma en que se supone que funciona?

Answer 1

this.hash devolverá "#foo" que también es un ID selector^[docs] válido. Por lo tanto, $(this.hash) es lo mismo que $("#foo") y seleccionará el elemento con IDfoo. En el segundo ejemplo, no tiene un elemento con ID bar. Por lo tanto, $(this.hash) no seleccionará ningún elemento y target.length será 0.

---

Quizás esté confundido por el hecho de que el navegador todavía salta a <a name="bar"></a>, aunque el alert no se muestra. El navegador no se comporta igual que jQuery.

Desde el HTML specification about the name attribute:

nombres de este atributo el ancla actual, de modo que puede ser el destino de otro enlace. El valor de este atributo debe ser un nombre de ancla único. El alcance de este nombre es el documento actual. Tenga en cuenta que este atributo comparte el mismo espacio de nombre como el atributo id.

Así que si el navegador reconoce un hash (identificador de fragmento) en la URL, se trata de encontrar el primer elemento con este ID o el primer elemento de a con ese nombre.

Por el contrario, los selectores de ID de CSS (eso es lo que usa jQuery) solo buscan elementos con esa ID, no para elementos (a) con ese nombre. Internamente, jQuery usa document.getElemenById.

---

Si el valor hash siempre se refiere a cualquiera de una identificación o un nombre, puede utilizar la selector múltiple de hacer sólo una selección:

$(this.hash + ', a[name="' + this.hash.substr(1) + '"]') 

En caso habría un elemento con este ID y un ancla con este nombre, sin embargo, los seleccionaría a todos.

Answer 2

porque el selector de $(this.hash) no encuentra nada en el segundo caso, this.hash retorno #foo y luego $("#foo") busca el elemento con id foo, que en el segundo caso el retorno nada

http://jsfiddle.net/BQU3u/5/

Answer 3

por qué no podemos usar attr ('href') - verificar este enlace

http://jsfiddle.net/BQU3u/11/

actualización

basta con quitar de $ $ (this.hash)

http://jsfiddle.net/BQU3u/12/