鱼C论坛

 找回密码
 立即注册
查看: 299|回复: 1

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

[复制链接]
发表于 2024-3-27 12:11:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
<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
最佳答案
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 小助理,如未能正确解答您的问题,请继续追问。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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 小助理,如未能正确解答您的问题,请继续追问。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-21 19:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表