javascript - jQuery 如何获取最后一个可见元素？

Question

请看一下这个:

http://jsfiddle.net/SHfz4/

从技术上讲，所有这些蓝色框都是可见的，因为没有显示为“无”，所以我不能使用这样的东西:

$('.row .inner .item:visible:last');

因为每次都会给出框 27。

正如您所看到的，一些框可见，而其他框则不可见，具体取决于视口(viewport)的大小，调整大小将导致更多框消失或进入 View 。

我需要一种方法来获取连续的最后一个可见项目。如何做到这一点？

附注我已经在这里发布了一些片段，展示了如何判断某个元素是否在 View 中，但其中一些脚本即使不应该返回 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>

Answer 1

这段代码符合您的预期吗？

var items = document.querySelectorAll('div[class^=item]')
    ,row = items[0].offsetParent
    ,rightBoundary = row.clientLeft+row.clientWidth
    ,bottomBoundary = row.clientTop+row.clientHeight
    ,found = null;

for (var i=0;i<items.length;i+=1){
    if (items[i].offsetLeft > rightBoundary || 
        items[i].offsetTop > bottomBoundary){
        found = items[i-1];
        break;
    }
}
// reports div.item item-17

参见this fork你的 jsFiddle

[编辑]在第一行项目下面添加了对[不可见]项目的检查，请参阅full screen version jsFiddle 的