jQuery實(shí)現(xiàn)的簡單獲取索引功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡單獲取索引功能。分享給大家供大家參考,具體如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>www.dbjr.com.cn 獲取當(dāng)前點(diǎn)擊的元素在原來集合中的索引</title> <style type="text/css"> li { height: 25px; line-height: 25px; background: rgba(0,0,0,0.5); border-bottom: 1px solid red; } a { text-decoration: none; font-size: 16px; } </style> </head> <body> <div> <ul> <li> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <div class="index"> 0 </div> </a> </li> <li> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <div class="index"> 1 </div> </a> </li> <li> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <div class="index"> 2 </div> </a> </li> <li> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <div class="index"> 3 </div> </a> </li> <li> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <div class="index"> 4 </div> </a> </li> </ul> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".index").on("click",function(){ var $target = $(this); console.log($(".index").index($target)); }); }); </script> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun測試運(yùn)行結(jié)果如下:
更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》
希望本文所述對大家jquery程序設(shè)計(jì)有所幫助。
- jquery獲取元素索引值index()示例
- jquery 獲取當(dāng)前元素的索引值
- Jquery index()方法 獲取相應(yīng)元素索引值
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- jQuery實(shí)現(xiàn)獲取元素索引值index的方法
- jquery獲取當(dāng)前元素索引值用法實(shí)例
- jquery 獲取索引值在一定范圍的列表方法
- jQuery在ul中顯示某個(gè)li索引號的方法
- jQuery建立一個(gè)按字母順序排列的友好頁面索引(兼容IE6/7/8)
- jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
相關(guān)文章
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證(檢測是否可用)
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入,感興趣的朋友可以參下哈,希望對你有所幫助2013-05-05使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡歷(可換膚)
點(diǎn)擊姓名會顯示她的基本詳細(xì)信息,點(diǎn)擊切換皮膚,會更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡歷2013-04-04jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路及核心代碼,需要的朋友可以參考下2014-06-06基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)
下面小編就為大家分享一篇基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動態(tài)變換效果,通過jQuery結(jié)合html5的canvas技術(shù)調(diào)用時(shí)間函數(shù)實(shí)時(shí)進(jìn)行數(shù)學(xué)運(yùn)算,最終實(shí)現(xiàn)球體平拋及顏色動態(tài)變換的效果,需要的朋友可以參考下2016-01-01基于jquery animate操作css樣式屬性小結(jié)
昨天突然有網(wǎng)友問我animate()方法可以來操作所有css屬性嗎?是的,我告訴他可以的。不過,在此有需要注意點(diǎn)需要大家搞清楚。接下來通過本篇文章給大家介紹基于jquery animate操作css樣式屬性小結(jié),對jquery animate css相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11jQuery實(shí)現(xiàn)的簡單排序功能示例【冒泡排序】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單排序功能,結(jié)合實(shí)例形式分析了冒泡排序的原理及具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01