用jquery統(tǒng)計(jì)子菜單的條數(shù)示例代碼
更新時(shí)間:2013年10月18日 11:18:53 作者:
統(tǒng)計(jì)子菜單條數(shù)的方法有很多,在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)

jquery tab特效~ (類似選項(xiàng)卡)http://www.dbjr.com.cn/article/42151.htm
復(fù)制代碼 代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<style type="text/css">
/* Remove margin padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; }
/* Default Font */
body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; }
h1,h2,h3,h4,h5,h6 { font-size:100%; }
address,cite,dfn,em,var { font-style:normal; }
code,kbd,pre,samp { font-family:courier new,courier,monospace; }
small { font-size:12px; }
ul,ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
legend { color:#000; }
fieldset,img { border:0; }
button,input,select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
.col-main{ float:left; width:100%; min-height:1px; }
.col-sub,.col-extra { float:left; }
.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after { content:'\20'; display:block; height:0; clear:both; }
.layout,.main-wrap,.col-sub,.col-extra { zoom:1; }
/* Common Features */
.hidden { display:none; }
.invisible { visibility:hidden; }
/* Remove Float */
.clear { display:block; height:0; overflow:hidden; clear:both; }
.clearfix:after { content:'\20'; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }
/* For non ie browsers also display the vertical scroll bar by default, to prevent the flicker caused by the scroll bar */
html { overflow-y:scroll; }
/* Default link styles */
a:link {color: #003399; }
a:visited {color: #123689;}
a:hover {color: #FF6600;}
</style>
</head>
<body>
<style type="text/css">
.menu { width:200px; border:1px solid #CCC; margin-bottom:20px }
.menu h3 { height:30px; line-height:30px; background:#ccc; }
.menu .num { font-weight:bold; color:red; padding-left:30px; }
</style>
<div class="menu">
<h3>系統(tǒng)設(shè)置 <span class="num"></span></h3>
<ul>
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4</li>
<li>菜單5</li>
<li>菜單6</li>
</ul>
</div>
<div class="menu">
<h3>菜單設(shè)置2 <span class="num"></span></h3>
<ul>
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>
</div>
<div class="menu">
<h3>菜單設(shè)置3 <span class="num"></span></h3>
<ul>
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4</li>
<li>菜單5</li>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
for ( var i=0; i<$('.menu').length; i++){
var num = $('.menu').eq(i).children('ul').children('li').length;
$('.menu').eq(i).find('.num').text(num);
}
</script>
</body>
</html>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法
- jQuery統(tǒng)計(jì)上傳文件大小的方法
- jQuery圓形統(tǒng)計(jì)圖開(kāi)發(fā)實(shí)例
- jquery統(tǒng)計(jì)用戶選中的復(fù)選框的個(gè)數(shù)
- jquery統(tǒng)計(jì)輸入文字的個(gè)數(shù)并對(duì)其進(jìn)行判斷
- jquery統(tǒng)計(jì)復(fù)選框選中示例
- 統(tǒng)計(jì)jQuery中各字符串出現(xiàn)次數(shù)的工具
- jquery讓指定的元素閃爍顯示的方法
- jQuery判斷元素上是否綁定了指定事件的方法
- jQuery驗(yàn)證元素是否為空的兩種常用方法
- jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法
相關(guān)文章
修改Jquery Dialog 位置的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇修改Jquery Dialog 位置的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jQuery利用sort對(duì)DOM元素進(jìn)行排序操作
這篇文章主要為大家詳細(xì)介紹了JQuery利用sort對(duì)DOM元素進(jìn)行排序的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11七個(gè)不允許錯(cuò)過(guò)的jQuery小技巧
這篇文章主要介紹了七個(gè)不允許錯(cuò)過(guò)的jQuery小技巧,幫助WEB開(kāi)發(fā)人員開(kāi)發(fā)出有創(chuàng)意和漂亮的WEB頁(yè)面,需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法,是非常實(shí)用的圖片特效技巧,需要的朋友可以參考下2015-02-02jquery獲取被勾選的checked(選中)的那一行的3列和4列的值
大家可能會(huì)遇到這種需求通過(guò)jquery獲取被勾選的checked的那一行的3列和4列的值,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07