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