专栏首页Savalone's Blogjs 为 li 循环添加 class

js 为 li 循环添加 class

前段时间有个小伙伴想在新闻列表页面的 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js 导航判断高亮

    前几天有个同学问说他有个 cms  没有 if 判断标签,php 还不会写,我就给他写了个能用的 jq,原理就是通过判断地址栏的链接和代码里导航部分的链接一致的...

    Savalone
  • ASPCMS 错误号:-2147467259 解决办法

    A、打开系统目录下的 windows/temp 属性;(注意:这里是 temp 文件夹的属性)

    Savalone
  • 修改 IIS 上传大小的限制方法

    Savalone
  • 隔行变色

    河湾欢儿
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study

扫码关注云+社区

领取腾讯云代金券