js 为 li 循环添加 class
js 为 li 循环添加 class
Savalone
发布于 2020-01-06 11:09:39
发布于 2020-01-06 11:09:39
前段时间有个小伙伴想在新闻列表页面的 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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年07月04日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读