鍍金池/ 問答/HTML/ jq 如何判斷一個div overflow:hidden 子元素可視個數(shù)

jq 如何判斷一個div overflow:hidden 子元素可視個數(shù)

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>JSONP 實例</title>

</head>
<body>
<div id="sss" style="height:65px;border:1px solid red;width:500px;overflow:hidden">
<div style="background:black;padding:5px">hahaha</div>
</div>
</body>
<script src="http://cdn.static.runoob.com/...;></script>
<script>
console.log(Math.ceil(Math.random()*10))
var s = '';
for(var i = 0;i<20;i++){
var n = Math.ceil(Math.random()*10),text='';
for(var j=0;j<n;j++){

text += '嗨'

}
s +='<div class="mm" style="border:1px black solid;margin:5px;float:left">'+text+'</div>';
}

$('#sss').html(s);

for(var i=0;i<$('.mm').length;i++){
console.log($('.mm').eq(i).is(':visible'))//這個方法不行
}

</script>
</html>
代碼 如上 我想獲得在#sss 框中可以看到的div個數(shù),請問如何用jq 實現(xiàn)

回答
編輯回答
來守候

$('#sss .mm:visible').length ?

2017年12月26日 21:11
編輯回答
不歸路

你思路有問題,放的時候就要判斷能不能看見了

<body>
  <div id="sss" style="height:65px;border:1px solid red;width:500px;overflow:hidden">
    <!-- <div style="background:black;padding:5px">hahaha</div> -->
  </div>
</body>
<script src="./js/jquery.js"></script>
<script>
  var s = '';
  for (var i = 0; i < 20; i++) {
    var n = Math.ceil(Math.random() * 10),
      text = '';
    for (var j = 0; j < n; j++) {
      text += '嗨'
    }
    $('#sss').append($('<div class="mm" style="border:1px black solid;margin:5px;float:left">' + text + '</div>'));
    if($(".mm").last().offset().top > $("#sss").get(0).offsetHeight){
      $(".mm").last().addClass("hidden");
    }
  }

  console.log($('.mm:not(.hidden)').length)

  

</script>
2018年9月4日 18:06
編輯回答
怪痞

實話講，你這需求有點...特別，如果單純的判斷內(nèi)容有沒有超出sss盒子范圍，很難。我的想法是你得循環(huán)遍歷sss下的子元素，并且去獲取每個元素的高度，相加來減去sss盒子的實際高度，超出的高度就得到了，然后你得去找對應(yīng)的下標(biāo)+1就是可見的個數(shù)了，樓上的方法貌似比我的思路要好一些，我的方法好像要死板一些

2017年7月12日 06:16