Выборка HTML элементов по data атрибутам c помощью jQuery.

Количество просмотров: 36

HTML5 принес возможность расширения данных связанных с элементом при помощи data атрибутов. В данной статье мы будем получать значения data у DOM элементов, а так же проводить выборку элементов по данным атрибутам. Начнем с разметки, на которой будем проводить наши тесты:


<div class="items-row">
  <div class="item" data-count="1"></div>
  <div class="item" data-count="2"></div>
  <div class="item" data-count="3"></div>
  <div class="item" data-count="4"></div>
</div>

Теперь попробуем получить все элементы с data атрибутом data-count, делается это очень просто -> $("[data-count]"); - данный селектор выберет все элементы с данным атрибутом вне зависимости от его значения.

Как видно на скриншоте консоли, элементы получены и с ними можно взаимодействовать. Теперь выберем элемент с конкретным значением атрибута, например первого, для этого подходит конструкция -> $("[data-count=1]");

Довольно просто, попробуем получить значение data атрибута, для этого в jQuery используется функция .data().

$('.item').data('count');

Если вы используете несколько слов в атрибуте, связанных через дефис, например: <div class="item" data-count-num="1"></div>, то можете воспользоваться camelCase нотацией для выборки $('.item').data('countNum');

Данный метод позволяет не только считывать атрибуты, но и добавлять их, воспользуемся, например, такой конструкцией:

$('.item').data('year',2019); т.е. добавим атрибут year со значением 2019, посмотрим, что получилось:

Отлично, все работает, спасибо за внимание. Статья будет обновляться.


© 2015-2019 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх