Как получить атрибут data-id элемента с помощью jQuery
Вы можете просто использовать метод jQuery attr() , чтобы найти атрибут data-id элемента HTML.
В следующем примере показано, как получить идентификатор данных для выбранного элемента.
jQuery Get the data-id Attribute ul li < display: inline-block; margin: 10px; list-style: none; opacity: 0.8; >ul li:hover 


В качестве альтернативы вы также можете использовать метод jQuery data() (версия jQuery >= 1.4.3), чтобы получить атрибут данных элемента, используя синтаксис типа $(element).data(key) .
Это означает, что в приведенном выше примере для получения data-id с помощью метода data() вы можете использовать такой оператор, как $(this).data(«id») . Ключ — это остальная часть после удаления data- .
Читайте также
Похожие примеры:
- Как получить идентификатор элемента, вызвавшего событие в jQuery
- Как найти элемент на основе значения data-attribute в jQuery
- Как удалить атрибут из элемента HTML в jQuery
Как силами 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); >); >);
Как получить id элемента с помощью jQuery
Вы можете просто использовать jQuery-метод attr() , чтобы получить или установить значение атрибута ID элемента.
В следующем примере будет отображаться идентификатор элемента DIV в окне предупреждения при нажатии кнопки.
jQuery Get ID of an Element div #text
Вы также можете получить идентификаторы нескольких элементов, имеющих один и тот же класс, через цикл, например:
jQuery Get ID of Multiple Elements div #boxOne #boxTwo #boxThree
Вы также можете получить id отдельного элемента при использовании селектора классов на основе индекса, начиная с 0, например, чтобы получить идентификатор первого элемента в наборе совпадающих элементов, вы можете использовать $(«.box»).get(0).id или $(«.box»)[0].id .
Аналогичным образом, чтобы получить идентификатор последнего элемента, вы можете использовать что-то вроде этого: $(«.box»).get($(«.box»).length — 1).id или $(«.box»)[$(«.box»).length — 1].id , потому что селектор jQuery возвращает коллекцию совпадающих элементов, а не один элемент.
Читайте также
Похожие примеры:
- Как найти элемент на основе значения data-attribute в jQuery
- Как получить дочерние элементы селектора в jQuery
- Как добавить атрибуты к элементу HTML в jQuery
Как получить id input зная name?
Как получить время, зная часовой пояс?
я знаю часовой пояс +4, как определить время по нему? есть может какие-то онлайн-базы времени, от.
Как получить id элемента, зная только его класс?
Приветствую товарищи! Пожалуйста, помогите мне с решением одной задачи. У меня есть такой код: .
Получить названия файлов из input file в input text
Как переместить названия файла из input type file в input type text с помощью javascript?
Как получить дочерний элемент DIV’а, зная только его id?
Есть . Внутри него с неизвестным уровнем вложенности находится текстовое поле с определенным id.