每个元素的高度（如果更高）则起作用

Question

Good day, I'm trying to figure out how to do small thing.

I have several elements on page that needs to checked on height and if height is higher, for example > 100, then I need to call function for them.

So far I came up to this:

var filterHeight = $('div.class').height();

if (filterHeight > 100) {
    $('div.class').css('height', '100px');
    $('div.class').css('overflow-y', 'scroll');
}

Problem with that as you know is that it will add those params to all element because I strictly point to that.

I guess it I will need to do something with .each(), but...

Thank you for your suggestions and help.

---

Because I can't answer my own question I'm updating here.

---

I used your solution and change it a little bit, instead adding inline css I added class that fetch css.

So what I did is:

1) When page loads

$('div.class').each(function() {
    if ($(this).height() > 200) {
        $(this).addClass('scroller');
    }
});

.scroller {
height: 200px;
overflow-y: scroll !important;

}

So it checked all blocks with height more than 200px and adds class.

2) After I'm calling for Ajax/JOSN and it gives me new data for those blocks I was in need to check for those elements heigh changes. So on .ajax complete I removed class and check again.

 complete: function () {
        $('.box.refine .middle ul').removeClass('scroller')           
        $('.box.refine .middle ul').each(function() {
            if ($(this).height() > 200) {
                $(this).addClass('scroller');
            }
        });      
    }

Thats all.

Answer 1

You need to look at jQuery .each()

Something like:

$('.check-these').each( function(){
    if ($(this).height() > 100) {
        $(this).css('height', '100px');
        $(this).css('overflow-y', 'scroll');
    }
});

This isn't tested but should put you on the right track.

Answer 2

$('div.class').each(function(){
    if($(this).height() > 100)
    {
        $(this).css({height: "100px", overflow-y: "scroll"});
    }
});

Answer 3

Loop through the elements and check each individually:

$('div.class').each(function() {
    if ($(this).height() > 100) {
        $(this).css('height', '100px').css('overflow-y', 'scroll');
    }
});

But why not just put that in the css to begin with?

div.class {
    height: 100px;
    overflow-y: scroll;
}