时间戳

首页 > 解决方案 > 使用 jQuery 获取可见 DIV 的正确位置

html - 使用 jQuery 获取可见 DIV 的正确位置

问题描述

我有以下代码，其中一些 div 被隐藏，只有像“2020”这样的类的 div 才可见

$(document).ready(function(){
	$('.listCard').hide();
  $('.listCard.2020').show();
  console.log("last visible -->"+$(".listCard.2020:visible:last").index());
  console.log("First visible -->"+$(".listCard.2020:visible:first").index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
 <div class="col-sm listCard 2018">2018</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2018">2018</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
</div>

但是，当我得到第一个和最后一个 div 的索引时，它是可见的并且具有“2020”类，它显示的结果与预期的不同。

预期的结果是第一个可见的应该是 0，最后应该是 6。我只需要显示 div 位置的变量，我们可以使用任何其他方法。

演示代码 https://jsfiddle.net/5ak8hvq7/1/

标签： htmljquery

解决方案

布赖恩帕特森的回答是正确的。我对它做了一些调整。希望它会奏效。

$(document).ready(function(){
   if($(".listCard").hasClass("2020")){
      $(".listCard.2020").show();
      let listItems = $('.listCard.2020').slice(0);
      console.log("First: " + $('.listCard.2020').index(listItems));
      listItems = $('.listCard.2020').slice(-1);
      console.log("Last: " + $('.listCard.2020').index(listItems));
   }         
});

推荐阅读