1

次のマークアップがあるとしましょう (jsfiddle は以下で提供)

 <div class="masterContainer"> 
        <div class="filterContainerStrip"> 
            <div class="filterButton">Filter 001</div>
            <div class="filterButton">Filter 002</div>
             ...
        </div>
        <div class="hiddenFilterCount"> ... 4 filters hidden </div>
 </div>

任意の可変数の が存在する可能性がありますfilterButtonがfilterContainerStrip、オーバーフローはドロップダウンされ、コンテナに、、およびをfilterButtons設定することで表示されなくなります。max-widthheightoverflow-y: hidden

filterButtonsユーザーに表示できるように、現在非表示になっているの数を知りたいです。

これがフィドル jsfiddleです

更新されたフィドル

ありがとう

4

2 に答える 2

1

上の位置（親に対して）+高さが親の高さよりも高い場合、または左の位置+幅が親の幅よりも高い場合、要素が表示されていないと想定します。

$(window).on('resize', function(){
    var hidden = $('.filterButton').filter(function(){  
      return (this.offsetTop + this.offsetHeight > this.parentNode.clientHeight)
          || (this.offsetLeft + this.offsetWidth > this.parentNode.clientWidth);
    });    

   $('.hiddenFilterCount').text('... ' + hidden.length + ' filters hidden');    
});

デモ

于 2013-02-17T02:10:23.497 に答える
0

これはうまくいくはずです：

var $cont= $('.filterContainerStrip'), contH=$cont.height();

var hiddenEls= $cont.children().filter(function(){
    return $(this).position().top >= contH;
}).length;

$('.hiddenFilterCount').text( hiddenEls+' filters hidden');

デモ: http://jsfiddle.net/FbXep/3/

于 2013-02-17T01:58:55.080 に答える