如何通过js在li的奇偶或单双标签中增加class?
如下所示,请教大神,如何使用js实现<ul><liclass=“ji”></li><liclass=“ou”></li><liclass=“ji”></li><licla...
如下所示,请教大神,如何使用js实现
<ul>
<li class=“ji”></li>
<li class=“ou”></li>
<li class=“ji”></li>
<li class=“ou”></li>
</ul> 展开
<ul>
<li class=“ji”></li>
<li class=“ou”></li>
<li class=“ji”></li>
<li class=“ou”></li>
</ul> 展开
1个回答
展开全部
如果只是个视觉修饰而不是逻辑功能的话,能用css实现的效果就不要用js去做,css3的选择器:
nth-of-type()可以判断奇偶,虽然有可能低版本IE不支持,但是视觉效果的话低版本放弃就完了。
<style>
ul li:nth-of-type(odd){奇数行样式}
ul li:nth-of-type(even){偶数行样式}
<style>
如果我说服不了你,一定要js的话,那么继续:
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<meta charset="utf-8" />
<ul id="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<script>
function CheckLI() {
var obj = document.getElementById("list").getElementsByTagName("li");//取得#list下所有li
for(var i=0;i<obj.length;i++){//循环出每个li
//下面两句中添加class用的jquery的addClass()方法,需要载入JQ才支持,js原生的方法需要IE10才支持,兼容的方法要另外写函数,手打的,直接最简单的JQ实现
if(i % 2 == 0) {$(obj[i]).addClass("ou");}//如果被2整除是偶数
else {$(obj[i]).addClass("ji");}//否则是奇数
}
}
window.onload = CheckLI;//网页载入后执行以上函数
</script>
<style>
.ji{color: red;}
.ou{color: yellow;}
</style>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询