DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery索引在使用中的一些困惑
jquery索引在使用中的一些困惑
編輯:JQuery特效代碼     
今日同事很正式的向我提出了兩個關於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>

問題二:為什麼在button不在ul>li中,並且每個button後面加<br />的時候,彈出button的索引值翻了一倍,是從0-18的啊?
答:因為<br />也是同胞元素.

以下是在百度百科中查到的"同胞"的含義:
同父母所生的,例如同胞兄弟;
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved