Селектор jQuery выбирает только первую ссылку

Question

У меня есть такая таблица:

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div id="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

И я использую этот jQuery для выбора идентификатора остановки, по которому щелкнул пользователь.

$(function () {
    $("#stopId").live('click', function () {
    var stopId = $("#stopId").html()
        ...
        ...
    });
});

И все же моя переменнаяstopId всегда заканчивается первым идентификатором stopId в таблице, а не тем, который был фактически нажат.Так, где я иду не так?

Answer 1

Возможно, вы захотите изменить на

$(function () {
    $(".stopId").live('click', function () {
    var stopId = $(this);
        ...
        ...
    });
});

и HTML становится

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div **class**="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

Answer 2

Если этот цикл генерирует новый TR с каждой итерацией, то вы получите более одного объекта с таким же идентификатором, что является недопустимой разметкой. Идентификатор может использоваться в документе только один раз, поэтому jQuery не может его искать. Как только он находит первый, он готов.

Answer 3

Ключевым моментом здесь является разница между атрибутами 'id' и 'class' - общий источник путаницы и чего-то, что стоит понять.

Короче говоря, атрибут 'id' является уникальным идентификатор элемента на странице, поэтому на странице должен быть только один элемент с каждым идентификатором.Внутренне, jQuery использует document.getElementById(), чтобы найти элемент, который будет когда-либо возвращать только один элемент.

Для неуникальных (то есть повторяющихся) идентификаторов, таких как ваш stopId, вы должны использовать атрибут 'class',Для вашего кода просто измените 'id=' на 'class=' и измените "#stopId" на ".stopId".jQuery будет использовать document.getElementsByClassName(), который извлекает все элементы, имеющие атрибут class="stopId".Также обратите внимание, что у вас может быть несколько классов (например, class="stopId greenText")

См. Этот вопрос: класс div против id

Answer 4

Вы можете использовать $(this) для ссылки на селектор. Также вы должны использовать класс вместо ID, если он появляется несколько раз на одной странице.

  $(function () {
        $("#stopId").live('click', function () {
        var stopId = $(this).html()
            ...
            ...
        });
    });

http://jsfiddle.net/Vrmhv/