问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jq 如何判断一个div overflow:hidden 子元素可视个数

头像
mikechen
    1.1k10171308

    <!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个数,请问如何用jq 实现

    htmljavascript
    阅读 5.3k
    3 个回答
    得票最新
    头像
    supreme
      2.3k12465
      ✓ 已被采纳

      你思路有问题,放的时候就要判断能不能看见了

      <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>
      头像
      小白
        1533

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

        头像
        undefind_5
          1.5k1298133

          实话讲，你这需求有点...特别，如果单纯的判断内容有没有超出sss盒子范围，很难。我的想法是你得循环遍历sss下的子元素，并且去获取每个元素的高度，相加来减去sss盒子的实际高度，超出的高度就得到了，然后你得去找对应的下标+1就是可见的个数了，楼上的方法貌似比我的思路要好一些，我的方法好像要死板一些

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题