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

只是那个人

<li>
                    <a href="#" class="fa fa-industry plant"
                      >   工厂介绍
                    </a>
                    <ul class="submenu">
                      <li>
                        <a href="#">冲压工序 P </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">焊接工序 W </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">涂装工序 T </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">总装工序 A </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">成型工序 R </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">品检工序 I </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">物流工序 L </a>
                        <ul class="submenu">
                          <li>
                            <a href="#" class="fa fa-file-text"
                              >   生产工艺介绍</a
                            >
                          </li>
                          <li>
                            <a href="#" class="fa fa-file-video-o"
                              >   工序特色活动</a
                            >
                          </li>
                        </ul>
                      </li>

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

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

最佳答案

月排行榜 / 总排行榜

FishC

2024-3-27 12:11:38

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

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

<ul>
  <li>
    <i class="fa fa-file-text"></i>工厂介绍
    <ul>
      <li>
        冲压工序 P 
        <ul>
          <li>生产工艺介绍</li>
          <li>工序特色活动</li>
        </ul>
      </li>
      <li>
        焊接工序 W
        <ul>
          <li>生产工艺介绍</li>
          <li>工序特色活动</li>
        </ul>
      </li>
      <!-- 其他工序... -->
    </ul>
  </li>
</ul>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("ul").on("touchstart", ".fa-file-text", function () {
    var index = $(this).parent().index();
    console.log(index);
  });
</script>

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

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

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

跳转到最佳答案楼层

FishC

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

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

<ul>
  <li>
    <i class="fa fa-file-text"></i>工厂介绍
    <ul>
      <li>
        冲压工序 P 
        <ul>
          <li>生产工艺介绍</li>
          <li>工序特色活动</li>
        </ul>
      </li>
      <li>
        焊接工序 W
        <ul>
          <li>生产工艺介绍</li>
          <li>工序特色活动</li>
        </ul>
      </li>
      <!-- 其他工序... -->
    </ul>
  </li>
</ul>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("ul").on("touchstart", ".fa-file-text", function () {
    var index = $(this).parent().index();
    console.log(index);
  });
</script>

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

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

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