jQuery中index()方法用法實(shí)例

更新時間：2014年12月27日 12:34:28 投稿：shichen2014

這篇文章主要介紹了jQuery中index()方法用法,實(shí)例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下：

此方法可以搜索匹配元素，并返回元素的索引值。
索引值是從0開始的。

語法結(jié)構(gòu)一:

當(dāng)此方法沒有參數(shù)的時候，返回值是指定元素在其同輩元素集合中的索引位置。

復(fù)制代碼代碼如下:

$(selector).index()

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://chabaoo.cn/" />

<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>當(dāng)前l(fā)i元素的位置:<span>0</span></div>

<button id="btn">點(diǎn)擊查看結(jié)果</button>

</body>

</html>

上面代碼能夠返回類名為qian的li元素在其同輩元素集合中的索引值，看到這里大家可能有這樣的疑問，所謂同輩元素是否是同類元素，也就是說li元素在li元素集合中的索引值。

實(shí)例二:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://chabaoo.cn/" />

<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>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>

<button id="btn">點(diǎn)擊查看結(jié)果</button>

</body>

</html>

由以上的代碼可以看出，并非只是同類元素，而是所有的同輩元素。

語法結(jié)構(gòu)二:

當(dāng)方法的參數(shù)為DOM對象或者jQuery對象時，返回值是此DOM對象或者jQuery對象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM對象或者jQuery對象，那么返回值為-1。

復(fù)制代碼代碼如下:

$(selector).index(element)

參數(shù)列表:

參數(shù)	描述
element	獲得index位置的DOM對象或者jQuery對象。

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://chabaoo.cn/" />

<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>當(dāng)前l(fā)i元素的位置:<span>0</span></div>

<button id="btn">點(diǎn)擊查看結(jié)果</button>

</body>

</html>

實(shí)例二:

因?yàn)檎也坏狡ヅ涞脑?，所以返回值?1.

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://chabaoo.cn/" />

<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>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>

<button id="btn">點(diǎn)擊查看實(shí)例</button>

</body>

</html>

語法結(jié)構(gòu)三:

當(dāng)方法的參數(shù)為選擇器時，將會從通過此選擇器獲得的對象集合中查找元素。

復(fù)制代碼代碼如下:

$(selector).index(Jqselector)

參數(shù)列表:

參數(shù)	描述
Jqselector	選擇器，將會從通過此選擇器獲得的對象中查找元素。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://chabaoo.cn/" />

<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>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>

<button id="btn">點(diǎn)擊查看實(shí)例</button>

</body>

</html>