Question

在jquery中，如何计算overflow-y隐藏的div类？我尝试使用此功能，但它只计算hide()

的数量

$(".classname > *").filter(":hidden").size();

我如何计算overflow-y: hidden？

Answer 1

您可以尝试这样的事情：

var length = $(".classname > *").filter(function() {
  return this.style.overflowY == "hidden"
}).size();
alert(length);

事情是:hidden是一个选择器，用于检查屏幕中是否有任何dom节点可见。

但是你想看看特定对象中有多少元素具有overflow-y:hidden;的css属性。

所以这是一个css属性，所以你有两种方法：

在javascript中使用.style.overflowY：

elem.style.overflowY == "hidden"

并使用jquery：

$(this).css('overflow-y') == "hidden"

＆＃13;

var length = $(".clas > *").filter(function() {
  return this.style.overflowY == "hidden"
}).size();
alert(length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='clas'>
  <p style='overflow-y:hidden;'></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p style='overflow-y:hidden;'></p>
</div>

＆＃13;

Answer 2

假设您有以下html标记

<style>
    .className
    {
        overflow-y:hidden;
    }
</style>
<div class="className">div1</div>
<div class="className">div2</div>
<div class="className" style="overflow-y:auto">div3</div>
<div class="className" style="overflow-y:auto">div4</div>
<div class="className">div5</div>
<div class="className">div6</div>

然后你的jQuery代码看起来应该是这样的

$(document).ready(function()
{
    alert($('div.className').filter(function() {
    return $(this).css('overflow-y') == 'hidden';
    }).size());
});

如果您有以下标记而没有任何类规范

<div style="overflow-y:hidden">div1</div>
<div style="overflow-y:hidden">div2</div>
<div style="overflow-y:auto">div3</div>
<div style="overflow-y:auto">div4</div>
<div style="overflow-y:hidden">div5</div>
<div style="overflow-y:hidden">div6</div>

只需从.className选择器中删除$('div.className')即可。您的代码如下

$(document).ready(function()
{
    alert($('div').filter(function() {
    return $(this).css('overflow-y') == 'hidden';
    }).size());
});

修改

以上方法仅适用于父元素。如果您需要仅限儿童的选择器，只需使用
即可
$(document).ready(function() { alert($('div.className > *').filter(function() { return $(this).css('overflow-y') == 'hidden'; }).size()); });

如果您需要父级和子级的选择器，您可以使用类似
的内容
$(document).ready(function() { alert($('div.className, div.className *').filter(function() { return $(this).css('overflow-y') == 'hidden'; }).size()); });

如何计算overflow-y隐藏类

2 个答案: