jQuery не находит все ожидаемые ссылки в HTML

Question

Я использую jQueryPad, чтобы попробовать немного JavaScript, и я застрял. Учитывая, что у меня есть следующий фрагмент HTML:

<TABLE style="BORDER-COLLAPSE: collapse" id=phMain_Questions class=GridView border=1 rules=all cellSpacing=0><TBODY>
<TR class=GridViewHeader>
<TH scope=col>&nbsp;</TH>
<TH scope=col>&nbsp;</TH></TR>
<TR class=GridViewRow>
<TD><A id=hlQuestionDetails href="javascript:AddQuestionWindow_Open(3, 39, 'False');">This is a test question</A> </TD>
<TD><A href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$phMain$gvQuestions$ctl02$ctl00", "", true, "", "", false, true))'>Remove</A> </TD></TR>
<TR class="GridViewRow GridViewRowAlt">
<TD><A id=hlQuestionDetails href="javascript:AddQuestionWindow_Open(3, 40, 'False');">This is an option question.</A> </TD>
<TD><A href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$phMain$gvQuestions$ctl03$ctl00", "", true, "", "", false, true))'>Remove</A> </TD></TR></TBODY></TABLE>

Я хочу выбрать все теги a, чей атрибут id равен hlQuestionDetails. Мой удар в этом:

var links = $("a#hlQuestionDetails");
alert($(links).length);

Количество найденных тегов a равно 1, но, как вы можете видеть в HTML, на самом деле существует 2 a тега с таким именем.

Может кто-то указать, что я делаю не так, потому что не могу понять, почему jQuery оставляет один из тегов a.

EDIT:

Что касается комментариев, я вижу проблему. HTML был создан с помощью элемента управления gridview ASP.NET. Так что вместо этого я должен использовать атрибут класса, я думаю? Приветствия. Иак.

Answer 1

Идентификатор атрибута должен уникальный идентификатор элемента. Вместо этого вы должны использовать атрибут класса.

Answer 2

идентификаторы должны быть уникальными в HTML, и селектор идентификаторов отображается на document.getElementById, что возвращает первый соответствующий элемент с этим идентификатором - вместо этого присвойте каждому элементу class и используйте селектор класса :

var links = $("a.hlQuestionDetails"); 

Answer 3

Идентификатор тега должен быть уникальным и должен быть в кавычках. Если вы хотите настроить таргетинг на несколько тегов, используйте фиктивный класс, т. Е. «Вопрос», а затем используйте $('.Question') для таргетинга своих тегов.

Answer 4

Идентификатор должен быть уникальным идентификатором на html-странице.Вот почему getElementById (...) возвращает только 1 элемент.Я думаю, JQuery делает то же самое.Попробуйте вместо этого использовать атрибут class и селектор:

<a href=".." class="hlQuestionDetails">...</a>
<a href=".." class="hlQuestionDetails">...</a>
<a href=".." class="hlQuestionDetails">...</a>

alert($('a.hlQuestionDetails').length)

Answer 5

идентификаторы должны быть уникальными в документе HTML (следовательно, ID ). Большинство браузеров возвращают элемент first , только если есть несколько элементов с одинаковым идентификатором. Вместо этого используйте классы

<A class="hlQuestionDetails" ...>This is a test question</A>

и получить элементы с помощью селектора класса:

var links = $("a.hlQuestionDetails");