Question

请看一下：

http://jsfiddle.net/SHfz4/

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

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

因为每次都会给出方框27。

正如您所看到的一些框是可见的而其他框不依赖于视图端口的大小，调整大小会导致更多的框离开视图或进入视图。

我需要一种方法来连续获取最后一个可见项目。怎么做？

P.S。我在这里发布了一些片段，告诉我们如何判断一个元素是否在视图中但是其中一些脚本返回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

请参阅jsFiddle的this fork

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

Answer 2

var timeout = '';

$(window).resize(function () {
   clearTimeout(timeout);
   timeout = setTimeout(function () {
       var $row = $('.row'),
           rWidth = $row.width(),
           $item = $row.find('.item').filter(function () {
               var $this = $(this),
                   l = $this.width() + $this.position().left;
               return l >= rWidth;
           }).first();
   }, 60);
}).resize();

http://jsfiddle.net/EkA3K/

如何获取jQuery中的最后一个可见元素？

2 个答案: