Quiero cambiar un atributo a muchos elementos que la bruja tiene la misma clase.

Tengo un montón de etiquetas "a" con un atributo "data-lc-categories- all".

Quiero cambiar ese atributo (data-lc-categories) a todas las etiquetas a con una clase de animación a data-lc-categories - "animation".

Mi problema es que si intento seleccionar los elementos usando un id funciona usando el:

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

O

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

pero cuando lo intento con

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

O

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

no funciona.

<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>
1
Tudor Constantinescu 4 nov. 2019 a las 18:39

1 respuesta

La mejor respuesta

La versión JS simple no funciona porque getElementsByClassName() devuelve un nodeList. Como tal, no se puede llamar a setAttribute() en él. Es necesario recorrer los elementos individualmente y llamar al método en ellos uno por uno, algo como esto:

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

La versión de jQuery no funciona simplemente porque necesita separar argumentos con una coma, no dos puntos:

$('.animation').attr("data-lc-categories", "animation") 
2
Rory McCrossan 4 nov. 2019 a las 15:43
58696641