萬盛學電腦網 >> 腳本專題 >> javascript >> jquery設置子元素class的方法詳解
jquery設置子元素class的方法詳解
在 class="www111cnnet" 下有 3個 ul，現在希望給每個ul下的第5個li元素添加 class="com"
//獲取id=div1下的子元素的個數
$('#div1').children().length;
//獲取id=div1下的span元素個數
$('#div1').children('span').length;
具體jQuery代碼：
$(".www111cnnet ul li:nth-child(5)").addClass("com");
已經成功給每個ul下的第5個li添加class為com
當然，也可以直接添加 CSS 代碼：
$(".www111cnnet 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.111cn.net名告警</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背景色變為紅色
