JQuery this.hash поведение для ссылок на привязку страницы

У меня есть вопрос о том, как this.hash работает для ссылок на привязку страниц в jQuery.

Мне нужно обработать хэш-атрибут каждый раз, когда пользователь нажимает на эту ссылку.

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

В приведенном выше фрагменте HTML, когда я извлекаю хэш-атрибут, все работает нормально.

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

Однако, когда я использую атрибут name вместо атрибута id для цели, this.hash возвращает нулевой объект.

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

В этом случае событие click не запускает предупреждение.

Полный пример здесь

Может кто-нибудь объяснить, что мне здесь не хватает, или если это так, как это должно работать?

Ответы

Ответ 1

this.hash вернет "#foo", который также является допустимым идентификатором [docs]. Следовательно, $(this.hash) совпадает с $("#foo") и выберет элемент с ID foo.
Во втором примере у вас нет элемента с идентификатором bar. Таким образом, $(this.hash) не будет выбирать какой-либо элемент, а target.length будет 0.

Возможно, вас смущает тот факт, что браузер все еще перескакивает на <a name="bar"></a>, хотя alert не отображается. Браузер не ведет себя так же, как jQuery.

Из спецификации HTML об атрибуте name:

Этот атрибут называет текущий якорь, чтобы он мог быть местом назначения другой ссылки. Значение этого атрибута должно быть уникальным именем привязки. Область действия этого имени - текущий документ. Обратите внимание, что этот атрибут имеет то же пространство имен, что и атрибут id.

Итак, если браузер распознает хэш (идентификатор фрагмента) в URL-адресе, он пытается найти первый элемент с этим идентификатором или первым элементом a с этим именем.

В отличие от селекторов CSS ID (то, что использует jQuery), выполняется поиск только элементов с этим идентификатором, а не для элементов (a) с этим именем. Внутри jQuery использует document.getElemenById.

Если хэш-значение всегда ссылается либо на идентификатор, либо на имя, вы можете использовать множественный селектор, чтобы сделать только один выбор:

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

В случае, если будет элемент с этим идентификатором и якорь с этим именем, вы должны выбрать все из них.

Ответ 2

потому что селектор $(this.hash) не находит ничего во втором случае, this.hash return #foo, а затем $("#foo") ищет элемент с id foo, который во втором случае не возвращает ничего

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