Как изменить атрибут на целый класс элементов, используя jQuery или JavaScript?

Question

Я хочу изменить атрибут на множество элементов с одинаковым классом.

У меня много тегов "a" с атрибутом "data-lc-Categories = all".

Я хочу изменить этот атрибут (data-lc-Categories) на все теги a с классом анимации на data-lc-Categories = "animation".

Моя проблема в том, что если я попробуючтобы выбрать элементы с помощью идентификатора, он работает с помощью:

setAttribute('data-lc-categories', 'animation'); // javascript

ИЛИ

$('#test1').attr({
    "data-lc-categories": "animation",
    "title": "some title"
}); // jQuery

, но когда я пытаюсь с помощью

document.getElementsByClassName(".img_portfolio_animation")
 .setAttribute('data-lc-categories', 'animation');

ИЛИ

$('.animation').attr("data-lc-categories": "animation") 

не работает.

<div class="new_filter_btns_container">
    <ul>
         <li id="filter_All" class="filter_btn">All</li>
         <li id="filter_animations" class="filter_btn">Animations</li>
         <li id="filter_interior" class="filter_btn">Interior Renders</li>
    </ul>
</div>

<a id="test1" class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all"     href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>

Answer 1

Обычная версия JS не работает, потому что getElementsByClassName() возвращает nodeList. Таким образом, вы не можете назвать setAttribute() на нем. Вам нужно циклически проходить по элементам и вызывать для них один за другим метод, что-то вроде этого:

var elements = document.getElementsByClassName(".img_portfolio_animation");
for (var i = 0; i < elements.length; i++) {
  elements[i].setAttribute('data-lc-categories', 'animation');
}

Версия jQuery не работает просто потому, что вам нужно разделять аргументы запятой, а недвоеточие:

$('.animation').attr("data-lc-categories", "animation")