如何使用 JavaScript 或 Jquery 动态地将 class 添加到 div？

Question

在我的标记中，我有两个 div 具有相同的 class 。我想在每个 div 中添加两个不同的 class 。

我的 html 代码看起来像

<div class="my-class">
    --Content--
</div>

<div class="my-class">
    --Content--
</div>

但我想要那两个 div 作为

<div class="my-class class-1">
    --Content--
</div>

<div class="my-class class-2">
    --Content--
</div>

所以，如果有 class "my-class" ，我想在 div 中添加一个 class像 class-(1 to N) ，我该怎么做？

Answer 1

这可能就是您想要的。

var classes = document.querySelectorAll('.my-class');
for(var i=0;i<classes.length;i++){
    classes[i].classList.add('class-'+i); 
    //classes[i].className += 'class-'+i; -> older browsers
}

Answer 2

var c = 1;
$(".my-class").each(function(){
$(this).addClass("class-" + c);
c++;
});

Answer 3

这样的事情怎么样：

$('.my-class').each(function(ind, ele) {
    var id = (ind+1);
    $(ele).addClass('class-' + id);
});

Check out the fiddle

Answer 4

我也会用.each()函数，这里以jsfiddle为例。

$(".my-class").each(function(i) {
 $(this).addClass("yourClass"+(i+1));
});

这会很神奇。

希望对您有所帮助

如何使用 JavaScript 或 Jquery 动态地将 class 添加到 div？

How to add a class to a div dynamically using JavaScript or Jquery?

javascript

jquery

class