Question

我有一个带有很多li的ul并且给ul高度隐藏了溢出，现在我需要找到没有溢出的数字元素或者溢出的数字元素。我尝试使用length（）函数，但它返回所有li计数

<ul id="am-container" class="am-container thumbs noscript" style="width: 100%; display: block;">
<li id="1" class="image-in">
<li id="4" class="image-in">
<li id="5" class="image-in">
<li id="6" class="image-in">
<li id="7" class="image-in">
<li id="8" class="image-in">
<li id="9" class="image-in">
<li id="10" class="image-in">
<li id="11" class="image-in">
<li id="12" class="image-in">
<li id="13" class="image-in">
<li id="14" class="image-in">
<li id="15" class="image-in">
<li id="16" class="image-in">
<li id="17" class="image-in">
<li id="18" class="image-in">
<li id="23" class="image-in">
<li id="24" class="image-in">
<li id="25" class="image-in">
<li id="26" class="image-in">
<li id="30" class="image-in">
<li id="33" class="image-in">
<li id="34" class="image-in">
<li id="35" class="image-in">
<li id="36" class="image-in">
<li id="38" class="image-in">
<li id="39" class="image-in">
<li id="40" class="image-in">
<li id="41" class="image-in">
<li id="42" class="image-in">
<li id="43" class="image-in">
<li id="44" class="image-in">
<li id="45" class="image-in">
<li id="46" class="image-in">
<li id="47" class="image-in">
<li id="52" class="image-in">
<li id="53" class="image-in">
<li id="54" class="image-in">
<li id="55" class="image-in">
</ul>

css：

.am-container.thumbs {
    max-height: 365px;
    overflow: hidden;
}

答案

通过使用提供的答案，这对我来说非常完美：

var hiddenEls = new Array();

        $("#am-container").find("li").each(function(){
            if ($(this).position().top < $("#am-container").position().top + 275)
                hiddenEls.push($(this));
        });
        var numrow = hiddenEls.length;

Answer 1

您可以使用此页面找到页面中显示的li个元素

var maxh = $("ul.am-container").height();

console.log($("ul.am-container li").filter(function () {
    return $(this).position().top + $(this).height() < maxh;

}).length);

Answer 2

这不是那么容易，

您需要将每个元素的位置与文档（正文）的高度进行比较：

var h = $("body").height();
var hiddenEls = new Array();

$("#am-container").find("li").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});
alert (hiddenEls.length);

{{3H2>

Answer 3

另一种方式

HTML

<ul>
  <li>Jquery</li>
  <li>Nageshwar</li>  
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Nageshwar</li>  
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li>
  <li>Jquery</li></ul>

总隐藏元素：15

CSS

ul{
height:100px;
overflow:hidden;}

JQuery的

var len,count;
len=parseInt($("li").height());
count=$("li").length;
var hiddenHeight=(len*count)-($("ul").height());
hiddenHeight=parseInt(hiddenHeight);
var hiddenLi=hiddenHeight/len;
hiddenLi=Math.ceil(hiddenLi);
$("#count").html(hiddenLi);

jQuery获取Overflow隐藏元素的数量

3 个答案:

{{3H2>