快捷導(dǎo)航

jQuery實(shí)現(xiàn)的簡(jiǎn)單獲取索引功能示例

更新時(shí)間：2018年06月04日 12:04:54 作者：前端愛(ài)我

這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單獲取索引功能,涉及jQuery事件響應(yīng)及元素索引獲取相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡(jiǎ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.fzitv.net 獲取當(dāng)前點(diǎn)擊的元素在原來(lái)集合中的索引</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測(cè)試運(yùn)行結(jié)果如下：

更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jquery常用操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》

希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

40個(gè)有創(chuàng)意的jQuery圖片和內(nèi)容滑動(dòng)及彈出插件收藏集之二
在網(wǎng)頁(yè)的首頁(yè)或圖片專(zhuān)題頁(yè)面很多地方都會(huì)用到圖片滑動(dòng)插件來(lái)循環(huán)切換多張圖片，并且用戶(hù)可以點(diǎn)擊左右按鈕來(lái)切換圖片。
2011-12-12
解析Jquery中如何把一段html代碼動(dòng)態(tài)寫(xiě)入到DIV中(實(shí)例說(shuō)明)
本篇文章是對(duì)在Jquery中把一段html代碼動(dòng)態(tài)寫(xiě)入到DIV中的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下
2013-07-07
jquery中ajax函數(shù)執(zhí)行順序問(wèn)題之如何設(shè)置同步
這篇文章主要介紹了jquery中ajax函數(shù)執(zhí)行順序問(wèn)題之如何設(shè)置同步,需要的朋友可以參考下
2014-02-02
JQuery從頭學(xué)起第三講
看了前面兩講的54淘客網(wǎng)友，我想應(yīng)該對(duì)JQuery已經(jīng)有了個(gè)初步的認(rèn)識(shí)，知道如何用JQuery選擇器來(lái)獲取控件的值，今天我們主要講使用JQuery對(duì)常用控件的取值。
2010-07-07
jquery實(shí)現(xiàn)翻動(dòng)fadeIn顯示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)翻動(dòng)fadeIn顯示的方法,實(shí)例分析了jQuery中fadeIn方法的使用技巧,需要的朋友可以參考下
2015-03-03
jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
經(jīng)常會(huì)遇到這樣的情況，當(dāng)頁(yè)面展示內(nèi)容過(guò)長(zhǎng)時(shí)，想點(diǎn)導(dǎo)航切換欄目，就得把滾動(dòng)條拉回到頂上，這樣操作總不太人性化，能不能讓導(dǎo)航超出顯示范圍外時(shí)自動(dòng)貼在屏幕最頂上呢？答案肯定是能的。如果不太明白，把滾動(dòng)條拉到下面點(diǎn)，看下我博客是效果就明白了。
2011-09-09
jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開(kāi)關(guān)
本文給大家分享一段jquery代碼實(shí)現(xiàn)滑動(dòng)按鈕開(kāi)關(guān)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下
2016-12-12
利用jquery禁止外層滾動(dòng)條的滾動(dòng)
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動(dòng)條的滾動(dòng),文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-01-01
Jquery中給animation加更多的運(yùn)作效果實(shí)例
這篇文章介紹了Jquery中給animation加更多的運(yùn)作效果實(shí)例，有需要的朋友可以參考一下
2013-09-09
jquery實(shí)現(xiàn)適用于門(mén)戶(hù)站的導(dǎo)航下拉菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)適用于門(mén)戶(hù)站的導(dǎo)航下拉菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單項(xiàng)實(shí)現(xiàn)下拉列表顯示效果的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08