如何计算溢出y隐藏类

Question

In jquery, how to count overflow-y hidden div class ? I tried to used this but it only count numbers of hide()

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

How can I count in overflow-y: hidden ?

Answer 1

You can try something like this:

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

The thing is :hidden is a selector which is used to check if any dom node is not visible in the screen.

But you want to see how many elements in a particular object has the css property of overflow-y:hidden; .

So this is a css property so you have two ways:

in javascript use .style.overflowY :

elem.style.overflowY == "hidden"

and using jquery:

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

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

 <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> 

Answer 2

Suppose you have the following html mark-up

<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>

Then your jQuery code should look something like this

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

If you have the following mark-up without any class specification

<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>

Simply remove .className from $('div.className') selector. And your code is as follows

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

EDIT

The above approach applies to parent element only. If you need a selector for children only , simply use

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

If you need a selector for the parent and children , you can use something like

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