js 为 li 循环添加 class

2020-01-06 11:09:39 浏览数 (1)

前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,现在分享出来,很多东西都是通用的。

由于 js 中的 i 是从 0 开始的,所以就变成了 0 1 2 3 ,四个一循环。

代码语言:javascript复制
<!DOCTYPE html>
<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>

0 人点赞