jquery索引在使用中的一些困惑
更新時間：2013年10月24日 17:54:11 作者：
為什么現(xiàn)在彈出來每個button（在ul li中的）的索引值都是零，為什么不是從0-9排列的等等一系列問題將在本文為大家詳細(xì)介紹下
今日同事很正式的向我提出了兩個關(guān)于jquery的問題,我也很正式得做了回答,順便把源碼貼到這里希望對朋友們有所幫助:
<script type="text/javascript">
$(function(){
$("input[type=button]").click(function(){
alert($(this).index());
})
})
</script>
<ul>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
</ul>
問題一：為什么現(xiàn)在彈出來每個button（在ul>li中的）的索引值都是零，為什么不是從0-9排列的；
答:第一個匹配元素的 index，相對于同胞元素,獲得第一個匹配元素相對于其同胞元素的 index 位置。請注意是"同胞".
<script type="text/javascript">
$(function(){
$("input[type=button]").click(function(){
alert($(this).index());
})
})
</script>
<ul>
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
</ul>
問題二：為什么在button不在ul>li中，并且每個button后面加<br />的時候，彈出button的索引值翻了一倍，是從0-18的??？
答:因為<br />也是同胞元素.
以下是在百度百科中查到的"同胞"的含義:
同父母所生的，例如同胞兄弟；
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
$("input[type=button]").click(function(){
alert($(this).index());
})
})
</script>
<ul>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
<li><input type="button" value="按鈕一" /></li>
</ul>
問題一：為什么現(xiàn)在彈出來每個button（在ul>li中的）的索引值都是零，為什么不是從0-9排列的；
答:第一個匹配元素的 index，相對于同胞元素,獲得第一個匹配元素相對于其同胞元素的 index 位置。請注意是"同胞".
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
$("input[type=button]").click(function(){
alert($(this).index());
})
})
</script>
<ul>
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
<input type="button" value="按鈕一" /><br />
</ul>
問題二：為什么在button不在ul>li中，并且每個button后面加<br />的時候，彈出button的索引值翻了一倍，是從0-18的??？
答:因為<br />也是同胞元素.
以下是在百度百科中查到的"同胞"的含義:
同父母所生的，例如同胞兄弟；
相關(guān)文章
Jquery仿IGoogle實現(xiàn)可拖動窗口示例代碼
這個拖動窗口是根據(jù)一個Jquery的框架直接做出來的:easywidgets，廢話就不多說了，直接把源代碼貼出來，讓大家學(xué)習(xí)2014-08-08
在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法
本篇文章主要是對在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章主要介紹了jQuery+CSS3實現(xiàn)點贊功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
基于JQuery實現(xiàn)圖片上傳預(yù)覽與刪除操作
這篇文章主要為大家詳細(xì)介紹了基于JQuery實現(xiàn)圖片上傳預(yù)覽與刪除操作的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
Jquery中使用setInterval和setTimeout的方法
有時候需要在jquery中調(diào)用setInterval和setTimeout,直接在ready中調(diào)用其他方法，會提示缺少對象的錯誤，解決方法如下2013-04-04
gridster.js是一款基于jquery的前端拖拽插件，效果相當(dāng)?shù)牟诲e，大家可以先看看Demo(http://gridster.net/#intro)（藍(lán)色部分的白塊就是了，可以隨便拖動，娛樂性很強(qiáng)）。2015-04-04
jQuery中Datatables增加跳轉(zhuǎn)到指定頁功能
本文給大家分享jquery中datatable增加跳轉(zhuǎn)到指定頁面功能以及jquery datatable中加入雙擊跳轉(zhuǎn)功能的實例代碼，需要的朋友參考下2017-02-02
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
jQuery實現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的超鏈接提示效果,結(jié)合實例形式對比分析了jQuery實現(xiàn)的帶有l(wèi)oading動態(tài)圖效果的提示文字以及默認(rèn)提示文字顯示效果,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery的promise與deferred對象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調(diào)中的作用,需要的朋友可以參考下2016-05-05