jquery如何设置子元素class属性?

发布时间:2020-06-18编辑:脚本学堂
本文介绍了jquery设置子元素class属性的方法,jquery脚本中如何设置子元素class?需要的朋友参考下。

jquery如何设置子元素class属性?

在 class="wwwjbxuecom" 下有 3个 ul,现在希望给每个ul下的第5个li元素添加 class="com"
 

复制代码 代码示例:
//获取id=div1下的子元素的个数
$('#div1').children().length;
//获取id=div1下的span元素个数
$('#div1').children('span').length;

具体jQuery代码:
 

$(".wwwjbxuecom ul li:nth-child(5)").addClass("com");
已经成功给每个ul下的第5个li添加class为com

当然,也可以直接添加 CSS 代码:
 

$(".wwwjbxuecom ul li:nth-child(5)").css({"padding-right":"5px"});
nth-child:英文中的缩写,n-th,表示第几个,1,2,3分别用 first、second、third 单词,从4开始便为数字的单词+th,如4th、5th、6th等等
获取ul下的第一个li
$("ul li:first-child")
获取ul下的最后一个li
$("ul li:last-child")

例子: 
 

复制代码 代码示例:
<div class="Bg01">
<ul>
<li class="Bold">黑域www.jb200.com名告警</li>
<li>总数:<span class="Mycolor">24条</span></li>
<li>未处理:<span class="Myred">03条</span></li>
</ul>
</div>

想获取上面class=“Bold”的元素:
 

复制代码 代码示例:
$(this).children("ul").children("li:first-child").css("color","#FF6666");

补充
获取同级元素:
1、next([expr]):
获取指定元素的下一个同级元素(注意是下一个同级元素哦)
 

复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>
</html>
 

结果:只有list item 4背景色变为红色。