Согласно стандарту html некоторый набор элементов на странице может иметь общие классы, однако id элементов должны быть уникальными. Возможность использования классов значительно упрощает работу с элементами. Скажем, мы можем задавать стили для них, а так же работать с ними посредством jQuery. Иногда возникает необходимость узнать id каких либо элементов, по которым был произведен клик.
Для начала представим наш базовый набор элементов на странице, с которым мы будем работать:
<div class="elemClass" id="first"> <div class="elemClass" id="second">
Для того чтобы узнать был ли клик по одному из элементов, мы будем использовать обработчики событий. В jQuery это традиционно делается таким образом, за основу берется имя класса, присвоенного нашим ключевым элементам. После клика на какой-либо элемент, посредством обработчика события мы будем определять точный элемент, по которому был произведен клик. Этот метод довольно универсален.
Кроме этого, для определения id элемента в jQuery нет отдельной функции которая это дело выполняет. Однако это легко компенсируется возможностью использования универсальной функции attr. Данная функция позволяет получать атрибуты элемента, а как мы знаем, id элемента так же является атрибутом. Таким образом, мы получаем возможность оперировать указателем $(this) который будет ссылаться на тот элемент, на который был произведен клик.
$(document).ready(function(){ $('.elemClass').click(function() { console.log($(this).attr('id')); }); });
По аналогии, вместо $(this) мы можем воспользоваться указателем this, который по сути является DOM аналогом этого объекта. Разумеется между ними есть разница, но для наших задач это не столь принципиально.
$(document).ready(function(){ $('.elemClass').click(function() { console.log(this.id); }); });
Ещё один способ реализации, ничем не лучший и не хуже предыдущих — это использование объекта, который будет содержать ссылку на элемент, по которому был произведен клик:
$(document).ready(function() { $(".elemClass").click(function(event) { console.log(event.target.id); }); });