开发者

Each element height if higher then function

开发者 https://www.devze.com 2023-04-09 04:07 出处:网络
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

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).hei开发者_JS百科ght() > 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.


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.


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


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;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号