Как получить ID элемента с помощью jQuery
В процессе работы бывает, что требуется получить ID элемента jQuery по которому кликнул пользователь. На странице есть несколько таких элементов с одинаковыми классами, но с разными ID. В этом случае обработчик события клика вешается на общий класс, а не на каждый элемент. Как в этом случае получить ID? Какой от отдельной функции в JQuery не предусмотрено, но это можно сделать и другими способами.
Способ 1
Использование функции .attr() – возвращает или изменяет значение атрибутов у выбранных элементов страницы.
$(document).ready(function(){ $('.button').click(function() { var clickId = $(this).attr('id'); }); });
Способ 2
Использование функции .prop() – Возвращает или изменяет значение свойств выбранных элементов страницы.
$(document).ready(function(){ $('button').click(function(){ var clickId = $(this).prop('id'); alert(clickId); }); });
Замечание .prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr(), поэтому в нашем случае использовать эту функцию не совсем правильно
Способ 3
Использование указателя this, который будет указывать не на объект типа jQuery, а на DOM-аналог этого объекта.
$(document).ready(function(){ $('.button').click(function(){ var clickId = this.id; }); });
Способ 4
Использование объекта event, который содержит данные о произошедшем событии.
$(document).ready(function() { $(".square").click(function(event) { var clickId = event.target.id; }); });
Избыточное количество методов )))))
Благодарю ! очень коротко, подробно и доступно! Пригодилось !)