论坛 › Web开发 › JQeruy无法获取当前索引号

只是那个人 发表于 2024-3-27 12:11:21

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 小助理，如未能正确解答您的问题，请继续追问。

查看完整版本: JQeruy无法获取当前索引号