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).

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

  • ozornick:

    Большое спазибо за показательное применение attr)

  • Александр:

    Спасибо, отличное описание! Как раз что искал!

  • Иван:

    Спасибо, за подробное хорошее описание

  • Hooba booba:

    Спасибо большое, то что нужно.

  • Дмитрий:

    В случае с $(this).parent().get(0) используем именно .id, потому что работаем не с $(this), а с его родителем, который, я так понимаю, подобен this (а не $(this)).

    То есть, $(this).parent().get(0).id будет возвращать нам правильный id родительского элемента :)

    //это я для себя по полочкам раскладываю :)

  • Zaynchump:

    «Fake Love» is a song by Canadian recording artist Drake,
    released as a single from his upcoming playlist More Life
    Fake Love watch?v=Ql-A-rwPtpQ
    YouTube: Drake Fake Love
    Help to find Drake Fake Love lyrics or Fake Love lyrics

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


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