В данном примере мы рассмотрим как можно получить список атрибутов и подумаем, где это можно применять на своих проектах.
Как узнать какие есть атрибуты у селектора при помощи jQuery
Вы наверняка уже знаете, что выбор селекторов по атрибуту значительно упрощает работу со страницей. Взять хотя бы:
input[type=text] {}
Простое CSS правило, но вам уже не нужно прописывать всем своим инпутам классы и искать их по всему проекту. Или, выбрать только те ссылки, которые ведут на PDF файлы:
a[href*=".pdf"]{}
Но, что если у нашего селектора уже есть атрибуты необходимые для работы. Это могут быть и слайдеры, и таблицы да и вообще все что угодно. Атрибуты, которые не входят в стандартный набор (у каждого тега есть список общих и уникальных атрибутов, которые работают только для него, такие как href – для ссылок), принято создавать через “data-“, и тогда даже валидатор W3C не будет ругаться.
<span data-time="2015" data-params="say my name"></span> <span data-time="2016" data-params="Heisenberg"></span>
У нас есть спан, с 2 атрибутами data-time и data-params, значения атрибутов всегда записываются как строка. Давайте получим список наших атрибутов, и их значения при помощи jQuery:
$('span').each(function() {
var arr;
arr = $.map(this.attributes, function (attribute) {
return attribute.name + ' = ' + attribute.value;
});
console.log(arr);
});
В консоли у нас появится запись:
["data-params = say my name", "data-time = 2015"] ["data-params = Heisenberg", "data-time = 2016"]
Как видите, выбирать все спаны на странице не очень удобно, поэтому добавьте родительский селектор:
$('.content span').each(function() {
В эти атрибуты мы можем записывать разную полезную информацию, которая не будет видна пользователям, но облегчит жизнь лично вам. Конкретно я когда-то сделал слайдер, который брал всю информацию из атрибутов data, мой html код приблизительно выглядел так:
<div class="slider" data-image-1="img/slider1.jpg" data-image-2="img/slider2.jpg"></div>
В итоге вы можете написать смену background-image по таймауту, а значения будут браться только если атрибут начинается с “data-” (и мы не возьмем атрибут class – хотя проще просто добавить родительский тег, как в примере выше).
Кроме того, не обязательно использовать each function – вы можете брать параметры только при клике, или при наведении, или при загрузке – событий ведь довольно много, и придумать можно все что угодно 🙂 . К тому же, вас никто не заставляет помещать всё в даты, чаще всего вам понадобятся значения из src или href – просто когда у вас неизвестное число атрибутов, и эти атрибуты не стандартны, то на помощь придет jQuery 🙂 .
