js 为 li 循环添加 class

javascript savalone 766 Views

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

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


<!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>

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫，即可进行扫码打赏哦

「本文由 Savalone 原创或搜集整理发布，转载请遵守 CC BY-NC-ND 4.0 许可！」
  • 14