jquery获取第几个索引方法

叁歲伎倆 2024-03-16 12:37 13阅读 0赞

使用jquery时经常会遇到，选择器选择一组元素后，需要在这组元素中找到第几个元素。

jquery中使用eq()方法找到第几个元素或第N个元素，jquery中eq()的使用如下：

eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0(不是 1)。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>'#test'</code><code>).eq(1).css({ </code><code>'display'</code><code>:</code><code>'inline-block'</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

将id为test的元素的第二个子元素样式设置为'display':'inline-block'。

另一种写法

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>":eq(index)"</code><code>)</code> </td> 
 </tr> 
 </tbody> 
</table>

如：$("p:eq(1)")

附另一种办法的例子

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;script&nbsp;type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"/jquery-latest.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&gt;</code> <code>$(</code><code>function</code><code>(){ </code> <code>$(</code><code>'a'</code><code>).each(</code><code>function</code><code>(i){ </code> <code>this</code><code>.onclick=</code><code>function</code><code>(){ </code> <code>alert(i);</code> <code>return</code>&nbsp;<code>false</code><code>;</code> <code>};</code> <code>});</code> <code>});</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

或者这样写

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>&lt;script&nbsp;type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"jquery-1.1.3.1.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&nbsp;type=</code><code>"text/javascript"</code><code>&gt;</code> <code>$(</code><code>function</code><code>()</code> <code>{ </code> <code>$(</code><code>"a"</code><code>).bind(</code><code>"click"</code><code>,</code><code>function</code><code>()</code> <code>{ </code> <code>alert($(</code><code>"a"</code><code>).index(</code><code>this</code><code>));</code> <code>}</code> <code>)</code> <code>}</code> <code>)</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

效果是一样的哦。