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;
}
精彩评论