2

请看一下:

http://jsfiddle.net/SHfz4/

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

$('.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>
4

2 回答 2

4

这个片段是否符合您的预期?

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 的这个分支

[编辑]在第一行项目下方添加了对[不可见]项目的检查,请参阅jsFiddle的全屏版本

于 2013-09-16T16:54:09.190 回答
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/

于 2013-09-16T16:51:05.300 回答