jQuery选择元素下标以及通过元素下标获得dom

约定不等于承诺〃 2023-06-15 06:44 88阅读 0赞

**jQuery选择元素下标 $(this).index()**  
注：本文的两个方法index值均从0开始；  
使用如下

<ul>
    	<li>Coffee</li>
    	<li>Milk</li>
    	<li>Soda</li>
    </ul>
    
    $(document).ready(function(){ 
      $("li").click(function(){ 
        alert($(this).index());
      });
    });

**通过元素下标获得dom**  
**写法一： $(“p:eq(1)”)**  
**写法二： $(‘p’).eq(index)**  
两个写法是实现的功能是一样的，都是通过元素下标获得dom。  
需要强调的是，在我们需要把变量作为下标的时候，推荐使用方法二 $(‘p’).eq(index)，方法一则需要字符串拼接，这方面如果有问题，请看这篇博客：[jQuery选择器 :eq() 不能识别变量的问题解决方案][jQuery_ _eq_]

$("p:eq(1)") //选择第二个 <p> 元素
    			 // 注：该方法如过想使用变量来作为下标，则需要字符串拼接，这个时候就需要

使用如下

效果如图  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

*其实这应该写在layui的分类下，因为，layui的tabs标签页切换的位置不可以设置在侧边，好吧，我只好自己写一个tabs切换。目前我了解到的，可以使用以上方法来实现tabs标签页*  
*jQuery真的太强大了*

[jQuery_ _eq_]: https://blog.csdn.net/weixin_45844049/article/details/103167048
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120172100815.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70