Работа с атрибутами

HTML-атрибуты, это дополнительные значения для установления различных характеристик. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

В jQuery для выполнения действий над атрибутами имеется два метода:

• attr() используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое
• removeAttr() применяется для удаления определённого атрибута у элемента или набора элементов

Получение значения атрибута

Получим значение атрибута href элемента #search:

<a id="search" href="https://yandex.ru">Яндекс</a>
<script>
// получим значение атрибута href и сохраним его в переменную href
var href = $('#search').attr('href');
// выведем значение переменной href в консоль
console.log(href); // https://yandex.ru
</script>

При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each():

<div class="section" id="section-1">...</div>
<div class="section" id="section-2">...</div>
<div class="section" id="section-3">...</div>
<script>
$('.section').each(function() {
  console.log( $(this).attr('id') );
});
</script>

Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined:

<h1>...</h1>
<script>
var id = $('h1').attr('id');
// undefined
console.log(id); 
</script>

Изменение значения атрибута

Изменение значения атрибута осуществляется также посредством attr(), поменяем значение атрибута src элемента #logo:

<img id="logo" src="logo.png">
<script>
$('#logo').attr('src', 'new_logo.png');
</script>

Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

<img id="logo">
<script>
  $('#logo').attr({
    src: 'logo.png',
    width: '250',
    height: '250',
    alt: '...'
  });
</script>

Удаление атрибута у элемента

В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr(), удалим атрибут rel у всех ссылок на странице:

$('a[rel]').removeAttr('rel');

В jQuery удалить атрибут можно также с помощью attr(). Для этого ему нужно в качестве значения установить null:

$('a[rel]').attr('rel', null);

Работа с атрибутом через функцию

Вариант установки атрибута с помощью функции:

// attr - имя атрибута
.attr('attr', function(index, value) {
  // ... //
})

В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined, то текущее значение не изменяется (оно остаётся прежним). Обратиться к текущему элементу в функции можно с помощью ключевого слова this.

Параметры функции:

• index индекс элемента в наборе
• valueAttr текущее значение атрибута

Например, установим для всех <li>, которые не имеют id атрибут id="index-{index}" (где: {index} - порядковый номер элемента в наборе).

<ul>
  <li>One</li>
  <li>Two</li>
  <li id="item-3">Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
<script>
$('li').attr('id', function(index, valueAttr){
  if (valueAttr === undefined) {
    return 'item-' + (index + 1);
  }
})
</script>

Добавление нового атрибута

В jQuery, установка нового атрибута или изменение существующего - это одна и также операция. Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow:

$('a').attr('rel', 'nofollow');

Пример, в котором добавим ко всем <li> атрибут data-index со значением соответствующем порядковому номеру этого элемента в #list:

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>
<script>
$('#list li').attr('data-index', function(index) {
  return index + 1;
});
</script>