jQuery中index()方法用法實例
更新時間：2014年12月27日 12:34:28 投稿：shichen2014
這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。
索引值是從0開始的。
語法結(jié)構(gòu)一:
當此方法沒有參數(shù)的時候，返回值是指定元素在其同輩元素集合中的索引位置。
復(fù)制代碼 代碼如下:
$(selector).index()
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://m.fzitv.net/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($(".qian").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li class="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
</ul>
</div>
<div>當前l(fā)i元素的位置:<span>0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
上面代碼能夠返回類名為qian的li元素在其同輩元素集合中的索引值，看到這里大家可能有這樣的疑問，所謂同輩元素是否是同類元素，也就是說li元素在li元素集合中的索引值。
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://m.fzitv.net/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#sou").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
由以上的代碼可以看出，并非只是同類元素，而是所有的同輩元素。
語法結(jié)構(gòu)二:
當方法的參數(shù)為DOM對象或者jQuery對象時，返回值是此DOM對象或者jQuery對象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM對象或者jQuery對象，那么返回值為-1。
復(fù)制代碼 代碼如下:
$(selector).index(element)
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://m.fzitv.net/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($("li").index(document.getElementById("qian")));
})
})
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
</ul>
</div>
<div>當前l(fā)i元素的位置:<span>0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
實例二:
因為找不到匹配的元素，所以返回值是-1.
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://m.fzitv.net/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("li").index(document.getElementById("sou")));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
語法結(jié)構(gòu)三:
當方法的參數(shù)為選擇器時，將會從通過此選擇器獲得的對象集合中查找元素。
復(fù)制代碼 代碼如下:
$(selector).index(Jqselector)
參數(shù)列表:
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://m.fzitv.net/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#qian").index("li"));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
上述代碼會取得id值為qian的li元素在通過li選擇器獲得li對象集合中的索引位置。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
jQuery遍歷DOM節(jié)點操作之filter()方法詳解
這篇文章主要介紹了jQuery遍歷DOM節(jié)點操作之filter()方法,結(jié)合實例形式詳細分析了filter的功能及4種具體用法,需要的朋友可以參考下2016-04-04
最近在做手機上的web app，很多場景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢和鼠標點擊的，于是就基于jquery弄了一個，每一個參數(shù)有詳細的說明2012-07-07
之前有碰到過jQuery實現(xiàn)列表自動滾動，這次的圖片輪播在原理上與之相同，只有一些細微的差別，就是需要在圖片的右下角顯示當前圖片的序號2013-09-09
首先聲明這2個無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴格的測試，正確使用不會出現(xiàn)bug2011-10-10
jQuery實現(xiàn)字符串按指定長度加入特定內(nèi)容的方法
這篇文章主要介紹了jQuery實現(xiàn)字符串按指定長度加入特定內(nèi)容的方法,實例分析了jQuery操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄獪\談jQuery框架Ajax常用選項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Treegrid的動態(tài)加載實例代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04
jQuery實現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)顏色打字機的完整代碼，代碼簡單易懂，非常不錯，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03