请看一下:
从技术上讲,所有这些蓝色框都是可见的,因为没有显示为无,所以我不能使用这样的东西:
$('.row .inner .item:visible:last');
因为那每次都会给框27。
正如您所看到的,有些框是可见的,而另一些则不取决于您的视口大小,调整大小将导致更多的框消失或进入视野。
我需要一种方法来获取连续的最后一个可见项目。这个怎么做?
PS 我已经在 SO 上发布了一些片段,这些片段显示了如何判断一个元素是否在视图中,但是其中一些脚本即使不应该返回 true,并且所有这些脚本都需要检查特定元素,但我的情况要求我只要求最后一个而不是专门测试给定的元素。
CSS:
.row { border: 1px solid red; height: 50px; overflow: hidden; }
.row .inner { width: 1000px; }
.row .inner .item { box-shadow: inset 0 0 8px blue; width: 50px; height: 50px; float: left; line-height: 50px; }
HTML:
<div class="row">
<div class="inner">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12">12</div>
<div class="item item-13">13</div>
<div class="item item-14">14</div>
<div class="item item-15">15</div>
<div class="item item-16">16</div>
<div class="item item-17">17</div>
<div class="item item-18">18</div>
<div class="item item-19">19</div>
<div class="item item-20">20</div>
<div class="item item-21">21</div>
<div class="item item-22">22</div>
<div class="item item-23">23</div>
<div class="item item-24">24</div>
<div class="item item-25">25</div>
<div class="item item-26">26</div>
<div class="item item-27">27</div>
</div>
</div>