[已解决]JQeruy无法获取当前索引号

只是那个人

1. <li>
   
2.                     <a href="#" class="fa fa-industry plant"
   
3.                       >&#160;&#160;&#160;工厂介绍
   
4.                     </a>
   
5.                     <ul class="submenu">
   
6.                       <li>
   
7.                         <a href="#">冲压工序 P </a>
   
8.                         <ul class="submenu">
   
9.                           <li>
   
10.                             <a href="#" class="fa fa-file-text"
    
11.                               >&#160;&#160;&#160;生产工艺介绍</a
    
12.                             >
    
13.                           </li>
    
14.                           <li>
    
15.                             <a href="#" class="fa fa-file-video-o"
    
16.                               >&#160;&#160;&#160;工序特色活动</a
    
17.                             >
    
18.                           </li>
    
19.                         </ul>
    
20.                       </li>
    
21.                       <li>
    
22.                         <a href="#">焊接工序 W </a>
    
23.                         <ul class="submenu">
    
24.                           <li>
    
25.                             <a href="#" class="fa fa-file-text"
    
26.                               >&#160;&#160;&#160;生产工艺介绍</a
    
27.                             >
    
28.                           </li>
    
29.                           <li>
    
30.                             <a href="#" class="fa fa-file-video-o"
    
31.                               >&#160;&#160;&#160;工序特色活动</a
    
32.                             >
    
33.                           </li>
    
34.                         </ul>
    
35.                       </li>
    
36.                       <li>
    
37.                         <a href="#">涂装工序 T </a>
    
38.                         <ul class="submenu">
    
39.                           <li>
    
40.                             <a href="#" class="fa fa-file-text"
    
41.                               >&#160;&#160;&#160;生产工艺介绍</a
    
42.                             >
    
43.                           </li>
    
44.                           <li>
    
45.                             <a href="#" class="fa fa-file-video-o"
    
46.                               >&#160;&#160;&#160;工序特色活动</a
    
47.                             >
    
48.                           </li>
    
49.                         </ul>
    
50.                       </li>
    
51.                       <li>
    
52.                         <a href="#">总装工序 A </a>
    
53.                         <ul class="submenu">
    
54.                           <li>
    
55.                             <a href="#" class="fa fa-file-text"
    
56.                               >&#160;&#160;&#160;生产工艺介绍</a
    
57.                             >
    
58.                           </li>
    
59.                           <li>
    
60.                             <a href="#" class="fa fa-file-video-o"
    
61.                               >&#160;&#160;&#160;工序特色活动</a
    
62.                             >
    
63.                           </li>
    
64.                         </ul>
    
65.                       </li>
    
66.                       <li>
    
67.                         <a href="#">成型工序 R </a>
    
68.                         <ul class="submenu">
    
69.                           <li>
    
70.                             <a href="#" class="fa fa-file-text"
    
71.                               >&#160;&#160;&#160;生产工艺介绍</a
    
72.                             >
    
73.                           </li>
    
74.                           <li>
    
75.                             <a href="#" class="fa fa-file-video-o"
    
76.                               >&#160;&#160;&#160;工序特色活动</a
    
77.                             >
    
78.                           </li>
    
79.                         </ul>
    
80.                       </li>
    
81.                       <li>
    
82.                         <a href="#">品检工序 I </a>
    
83.                         <ul class="submenu">
    
84.                           <li>
    
85.                             <a href="#" class="fa fa-file-text"
    
86.                               >&#160;&#160;&#160;生产工艺介绍</a
    
87.                             >
    
88.                           </li>
    
89.                           <li>
    
90.                             <a href="#" class="fa fa-file-video-o"
    
91.                               >&#160;&#160;&#160;工序特色活动</a
    
92.                             >
    
93.                           </li>
    
94.                         </ul>
    
95.                       </li>
    
96.                       <li>
    
97.                         <a href="#">物流工序 L </a>
    
98.                         <ul class="submenu">
    
99.                           <li>
    
100.                             <a href="#" class="fa fa-file-text"
     
101.                               >&#160;&#160;&#160;生产工艺介绍</a
     
102.                             >
     
103.                           </li>
     
104.                           <li>
     
105.                             <a href="#" class="fa fa-file-video-o"
     
106.                               >&#160;&#160;&#160;工序特色活动</a
     
107.                             >
     
108.                           </li>
     
109.                         </ul>
     
110.                       </li>

复制代码

1. $(".fa-file-text").on("touchstart", function () {
   
2.         var index = $(this).index();
   
3.         console.log(index);
   
4.       });

复制代码

我是想获得点击不同class="fa fa-file-text"  获得当前this 的索引号  结果点击打印出来的全是 0

最佳答案

月排行榜 / 总排行榜

FishC

2024-3-27 12:11:38

你好！在你的代码中，使用index()方法是正确的，但要注意的是，该方法获取的是元素在其父元素中的索引位置，而不是在整个文档中的索引位置。因此，你需要将事件绑定到每个class="fa fa-file-text"元素的父元素上，例如<ul>元素。

下面是一个修正后的示例代码：

1. <ul>
   
2.   <li>
   
3.     <i class="fa fa-file-text"></i>工厂介绍
   
4.     <ul>
   
5.       <li>
   
6.         冲压工序 P
   
7.         <ul>
   
8.           <li>生产工艺介绍</li>
   
9.           <li>工序特色活动</li>
   
10.         </ul>
    
11.       </li>
    
12.       <li>
    
13.         焊接工序 W
    
14.         <ul>
    
15.           <li>生产工艺介绍</li>
    
16.           <li>工序特色活动</li>
    
17.         </ul>
    
18.       </li>
    
19.       <!-- 其他工序... -->
    
20.     </ul>
    
21.   </li>
    
22. </ul>
    
23. 
    
24. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
25. <script>
    
26.   $("ul").on("touchstart", ".fa-file-text", function () {
    
27.     var index = $(this).parent().index();
    
28.     console.log(index);
    
29.   });
    
30. </script>

复制代码

在上述代码中，我将点击事件绑定到了<ul>元素上，并通过`.fa-file-text`选择器筛选出点击的元素。然后，使用`$(this).parent().index()`来获取父元素<li>在<ul>中的索引位置。

这样，你应该可以正确地获取每个点击元素的索引了。希望对你有所帮助！如有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

你好！在你的代码中，使用index()方法是正确的，但要注意的是，该方法获取的是元素在其父元素中的索引位置，而不是在整个文档中的索引位置。因此，你需要将事件绑定到每个class="fa fa-file-text"元素的父元素上，例如<ul>元素。

下面是一个修正后的示例代码：

1. <ul>
   
2.   <li>
   
3.     <i class="fa fa-file-text"></i>工厂介绍
   
4.     <ul>
   
5.       <li>
   
6.         冲压工序 P
   
7.         <ul>
   
8.           <li>生产工艺介绍</li>
   
9.           <li>工序特色活动</li>
   
10.         </ul>
    
11.       </li>
    
12.       <li>
    
13.         焊接工序 W
    
14.         <ul>
    
15.           <li>生产工艺介绍</li>
    
16.           <li>工序特色活动</li>
    
17.         </ul>
    
18.       </li>
    
19.       <!-- 其他工序... -->
    
20.     </ul>
    
21.   </li>
    
22. </ul>
    
23. 
    
24. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
25. <script>
    
26.   $("ul").on("touchstart", ".fa-file-text", function () {
    
27.     var index = $(this).parent().index();
    
28.     console.log(index);
    
29.   });
    
30. </script>

复制代码

在上述代码中，我将点击事件绑定到了<ul>元素上，并通过`.fa-file-text`选择器筛选出点击的元素。然后，使用`$(this).parent().index()`来获取父元素<li>在<ul>中的索引位置。

这样，你应该可以正确地获取每个点击元素的索引了。希望对你有所帮助！如有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。