×

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

作者:Terry2017.02.20来源:Web前端之家浏览:4685评论:0
关键词:JQueryJS
今日同事很正式的向我提出了两个关于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 />也是同胞元素.

以下是在百度百科中查到的"同胞"的含义:
同父母所生的,例如同胞兄弟;

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1487520000837.html

网友评论文明上网理性发言已有0人参与

发表评论: