2017
14
Фев

Как силами jquery получить id элемента

grigoriev
16676
jquery получить id элемента

В одном из моих проектов мне понадобилось получит id элемента веб страницы при клике на него. Так как к сайту была подключена библиотека jquery, то я и решил получить ид с её помощью. Об этом и пойдёт разговор в данной заметке.

По вопросу как силами получить ид элемента веб страницы я нашёл несколько вариантов реализации. Самые мне понравившиеся я опишу ниже. Для примеров работы кода я сделаю небольшой тестовый стенд. Это будет див c классом class="mytestbox1"(номер в конце будет меняться от номера варианта) и индентификатором с номером каждого варианта, например для первого варианта реализации получения ид через jq id="111". При клике по нашему диву будет выводиться через alert сообщение с номером id. И так приступим.

Вариант 1

Этот вариант на методе jquery attr(). Напомню что attr(), при его использование вернёт нам значение атрибута выбранного объекта вебстраницы.

                                     
$(document).ready(function(){
    $('.mytestbox1').click(function() {
        alert($(this).attr('id'));
    });
});
Вариант с attr()

Вариант 2

Второй вариант основан на использовании селектора jquery this. В использовании this есть небольшой нюанс. Использую this с знаком $ мы получим элемент как бы обёрнутый в jquery, а в this без $ мы получим DOM элемента. Для нашей задачи нам понадобится DOM

                                     
$(document).ready(function(){
    $('.mytestbox2').click(function() {
            alert(this.id);
    });
});
Вариант с this

Вариант 3

Третий вариант основан на использовании event. Eventэто объект события. Все события, которые произошли в браузере записываются в него. Это уже получается нативный js. Конструкция event.target возвращает нам элемент по которому произошол клик, а при добавлении к конструкции id мы получаем идентификатор нужного нам элемента.

                                     
$(document).ready(function(){
    $('.mytestbox3').click(function(event) {
        alert(event.target.id);
    });
});
Вариант с event

Поделиться:

Комментарии

Trioniki

Trioniki

26.04.2018 15:04 Ответить

Пишет "undefined" в алерте - почему не работает?

Trioniki

Trioniki

26.04.2018 15:05 Ответить

undefined - пишет в алерте

алексей григорьев

алексей григорьев

27.04.2018 22:36 Ответить

undefined это значит не найден элемент, проверьте правильность написания css селектора

You have no rights to post comments

Используя данный сайт, вы даете согласие на использование файлов cookie, помогающих мне сделать его удобнее для вас. Уведомление о cookie