jQuery comportamento.shsh per i collegamenti di ancoraggio in pagina

Question

Ho una domanda su come funziona this.hash nei collegamenti di ancoraggio della pagina in jQuery.

Ho bisogno di elaborare l'attributo hash ogni volta che l'utente fa clic su quel collegamento.

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

Per il frammento HTML sopra riportato, quando recupero l'attributo hash, tutto funziona correttamente.

Tuttavia, quando uso l'attributo nome anziché l'attributo id per la destinazione, this.hash restituisce un oggetto nullo.

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

In questo caso, l'evento click non attiva l'avviso.

The full example is here

qualcuno può spiegare che cosa manco qui o se questo è come dovrebbe funzionare?

Answer 1

this.hash restituirà "#foo" che è anche un valido ID selector^[docs]. Quindi lo $(this.hash) è lo stesso di $("#foo") e selezionerà l'elemento con IDfoo.
Nel secondo esempio, non si dispone di un elemento con ID bar. Pertanto, $(this.hash) non selezionerà alcun elemento e target.length sarà 0.

---

Forse si sono confusi dal fatto che il browser salti ancora <a name="bar"></a>, anche se il alert non viene mostrato. Il browser non si comporta come jQuery.

Dal HTML specification about the name attribute:

nomi Questo attributo l'ancora corrente in modo che possa essere la destinazione di un altro collegamento. Il valore di questo attributo deve essere un nome di ancoraggio univoco. Lo scopo di questo nome è il documento corrente. Si noti che questo attributo condivide lo stesso spazio dei nomi dell'attributo id.

Quindi, se il browser riconosce un hash (identificatore di frammento) nell'URL, si cerca di trovare il primo elemento con questo ID o il primo a elemento con quel nome.

Al contrario, i selettori ID CSS (quello che jQuery sta utilizzando) cercano solo elementi con quell'ID, non per (a) elementi con quel nome. Internamente, jQuery utilizza document.getElemenById.

---

Se il valore di hash è sempre riferendosi a uno un ID o un nome, è possibile utilizzare il multipla di selezione per fare un solo selezione:

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

Nel caso in cui ci sarebbe stato un elemento con questo ID e un'ancora con questo nome, tuttavia selezioneresti tutti.

Answer 2

perché il selettore $(this.hash) trova niente, nel secondo caso, this.hash ritorno #foo e poi $("#foo") guarda per l'elemento con id foo, che nel secondo caso di ritorno nulla

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

Answer 3

perché non possiamo usare attr ('href') - controllare questo link

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

Aggiornamento

sufficiente rimuovere $ da $ (this.hash)

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