# js代码实现为li标签循环添加class属性

*Published:* 2023-11-16
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年11月16日，已超过 180天没有更新



前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1 2 3 4的 class，正巧昨天做一个站也用到了类似 for 循环，现在分享出来，很多东西都是通用的。由于 js 中的 i 是从 0 开始的，所以就变成了 0 1 2 3 ，四个一循环。

```

<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        .num_0{color:yellow}
        .num_1{color:red}
        .num_2{color:blue}
        .num_3{color:green}       
    </style>
<script>
$(document).ready(function(){
  $("ul").each(function(){
    var lis = $(this).find("li");
    for(i in lis){
        var li = lis[i];
        console.log(i);
        if(i == 0){
            $(li).addClass("num_0");
        }else{
            if(i % 4 == 0){
                $(li).addClass("num_"+0);
            }else{
                $(li).addClass("num_"+(i%4));
            }
        }
    }
});
});
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</html>
```