jQuery: получить id элемента

Вопрос

Очень простой вопрос. Предположим, что на странице есть несколько элементов (например DIV-ов или кнопок), у всех элементов общий класс, и у каждого также уникальный идентификатор (id). Обработчик события клика вешается на общий класс, а не на каждый элемент. Необходимо с помощью jQuery получить id элемента, по которому кликнул пользователь.

<div class="square" id="first">
<div class="square" id="second">

Ответ №1

В jQuery нет отдельной функции для получения id элемента, но она там совершенно не нужна, поскольку это можно сделать очень просто и другими путями. Первый из них - использовать функцию attr. Как известно, эта функция получает атрибут элемента, а id это по сути обычный атрибут. Указатель $(this) будет ссылаться на тот элемент, по которому произведен клик:

$(document).ready(function(){
    $('.square').click(function() {
        console.log($(this).attr('id'));
    });
});

Но можно пойти и немного другим путём, по сути выполнить то же самое, только использовать не указатель $(this) объекта jQuery, а другой указатель this, который будет указывать не на объект типа jQuery, а на DOM-аналог этого объекта. Если я Вас запутал, почитайте вопрос об разнице между $(this) и this.

$(document).ready(function(){
    $('.square').click(function() {
        console.log(this.id);
    });
});

А ещё можно это сделать через объект event, в котором также будет хранится ссылка на «кликнутый» элемент:

$(document).ready(function() {
    $(".square").click(function(event) {
        console.log(event.target.id);
    });
});

Но вообще-то надобность получить id элемента на jQuery при обработке события на практике возникает редко, так как можно в этом случае все действия с нужным элементом выполнять через $(this).

80 комментария

Добавить комментарий


(обязательно)