Question

我想在导航中计算我的li元素，并将它们分成四个类，以使它们具有单独的边框颜色。

应该看起来像：

<ul>
    <li class="red"></li>
    <li class="yellow"></li>
    <li class="green"></li>
    <li class="blue"></li>
    <li class="red"></li>
    <li class="yellow"></li>
    <li class="green"></li>
    <li class="blue"></li>
</ul>

当然我想用jQuery动态地想它。

我试过了：

$('#navbar li').each(function(i) {
    $(this).addClass('className-' + i);
});

但该代码会计算我的ul中的所有li元素。

感谢您的帮助！

Answer 1

您可以将这些类存储在数组和数组中。在除以4（i％4）时，根据元素索引的其余部分为每个li元素分配一个类。

var classNames=['red','yellow','green','blue'];
$('li').each(function(i) {
    $(this).addClass(classNames[i%4]);
});

.red{
  color:red;
  }
.yellow{
  color:yellow;
  }
.green{
  color:green;
  }
.blue{
  color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

jQuery划分元素并添加类

1 个答案: