jquery索引在使用中的一些困惑

2019-11-20 21:50:47

字體：大中小

來源：轉載

供稿：網友

今日同事很正式的向我提出了兩個關于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> 

問題一：為什么現在彈出來每個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> 