jQuery как получить список атрибутов селектора

В данном примере мы рассмотрим как можно получить список атрибутов и подумаем, где это можно применять на своих проектах.

Как узнать какие есть атрибуты у селектора при помощи 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 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *