Question

嗨我在页面中有100个div。所以我想动态添加5个类。让我们说.class-1，.class-2，.class -3，.class-4，.class-5和这5个类需要为这100个div重复。我怎样才能动态实现。作为我的新手，请纠正我，如果我错了。

Answer 1

你的意思是this？

<强> HTML

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
        <li>eight</li>
        <li>nine</li>
        <li>ten</li>
    </ul>
</div>

<强> jquery的

var i = 0;
var count = 5;
$("#menu ul li").each(function () {
    if (i < count) {
        i++
    } else {
        i = 1;
    }
    $(this).addClass("item-" + (i));
});

Answer 2

我没有对此进行测试，但这应该可以解决问题。

$.each("div", function( index, value ) {
   var mod = (index % 5) + 1;
   $(this).addClass('class-' + mod);
});

Answer 3

您可以将函数传递给addClass()，然后只使用当前index和模数运算符来计算出要分配的正确数字：

$('div').addClass(function(index, currentClass) {
  return 'class-' + (index % 5 + 1);
});

Here's a fiddle

Answer 4

纯JS版本：

JSFiddle

var i = 0,
    count = 5,
    elem = document.getElementsByTagName("li");

for(a = 0; a < elem.length; a++)
{
    if (i < count) {
        i++
    } else {
        i = 1;
    }        
    elem[a].className = "item-"+i;
}

我想添加动态类

4 个答案:

Here's a fiddle