切换新li后仍统计全部li索引的jQuery技术问题

问题的核心在于你当前使用的index()方法默认是获取元素在其直接父元素中的相对位置，两个.iq容器里的<li>属于各自独立的列表，所以切换到#why容器后，里面的<li>索引会重新从0开始。要统计所有<li>的全局索引，我们可以利用jQuery的index()方法的另一种用法——传入元素来获取它在全局匹配集合中的位置，同时保留你要求的$(this).closest('li')核心逻辑。

修改后的代码 #

JavaScript

$("#yy").click(function(){ 
  $("#why").fadeToggle(250); 
  $("#tts").css("display", "none"); 
});
$(".iq").on('click', '[data-video]', function(){ 
  // 保留你要求的获取当前li的逻辑
  var currentLi = $(this).closest('li');
  // 获取所有.iq容器下的li，再计算当前li在全局集合中的索引
  var img_id = $('.iq li').index(currentLi); 
  alert(img_id); 
});

CSS（无需修改）

#why{ width:100%; top:0; height:50%; background-color:rgba(79, 79, 90, 0.92); z-index: 2; display: none; position: fixed; }
#yy{ background-color:black; width:50px; height:50px; bottom:0; position:absolute; }
li{ list-style:none; }

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "searchBarN" class = "iq">
<li class="rutor"><img data-video="one" alt="play"> </li><br>
<li class="rutor"><img data-video="2" alt="play"> </li><br>
<li class="rutor"><img data-video="3" alt="play"> </li><br>
</div>
<div id = "why" class = "iq">
<li class="rutor"><img data-video="4" alt="play"> </li><br>
<li class="rutor"><img data-video="5" alt="play"> </li> <br>
<li class="rutor"><img data-video="6" alt="play"> </li><br>
</div>
<div id = "yy"></div>

原理说明 #

1. 保留核心逻辑：我们依然用$(this).closest('li')获取当前点击图片所在的<li>元素，完全符合你“不删除该行核心逻辑”的要求；
2. 全局索引计算：$('.iq li')会选中所有两个.iq容器下的<li>元素，形成一个全局的集合。调用index(currentLi)时，jQuery会返回currentLi在这个全局集合中的位置，这样就能得到从0开始的连续全局索引（0-5对应6个<li>）；
3. 不影响DOM状态：这个方法不需要修改任何元素的显示状态或删除元素，完全满足你“保留后台可见性”的需求。

内容的提问来源于stack exchange，提问作者Furious Mountain