How to change attribute to a whole class of elements using jQuery or JavaScript?

Question

I want to change a attribute to lots of elements witch all have the same class.

I have lots of "a" tags with a "data-lc-categories= all" attribute.

I want to change that attribute(data-lc-categories) to all the a tags with a class of animation to data-lc-categories = "animation".

My problem is that if I try to select the elements using a id it works using the:

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

OR

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

but when I try with

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

OR

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

it doesn't work.

<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>

This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. — mplungjan
– mplungjan, Commented Nov 4, 2019 at 15:44

Rory McCrossan · Accepted Answer · 2019-11-04 15:43:19Z

2

The plain JS version doesn't work because getElementsByClassName() returns a nodeList. As such you cannot call setAttribute() on it. You need to loop through the elements individually and call the method on them one by one, something like this:

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

The jQuery version doesn't work simply because you need to separate arguments with a comma, not a colon:

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

answered Nov 4, 2019 at 15:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change attribute to a whole class of elements using jQuery or JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related