每个元素高度如果高于函数

时间:2011-09-28 09:44:55

标签: javascript jquery if-statement each

美好的一天,我想弄清楚如何做小事。

我在页面上有几个元素需要检查高度,如果高度更高,例如> 100,然后我需要为他们调用函数。

到目前为止,我想到了这个:

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

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

问题就像你知道的那样,它会将这些参数添加到所有元素中,因为我严格指出了这一点。

我想我需要用.each()做一些事情,但是......

感谢您的建议和帮助。


因为我无法回答我自己的问题,所以我在这里更新。


我使用了你的解决方案并稍微更改了一下,而是添加了内联css我添加了获取css的类。

所以我做的是:

1)页面加载时

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

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

}

所以它检查了所有高度超过200px的块并添加了类。

2)在我调用Ajax / JOSN后,它为我提供了那些块的新数据,我需要检查这些元素是否有变化。所以.ajax完成后我删除了课程并再次检查。

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

多数人。

3 个答案:

答案 0 :(得分:2)

您需要查看jQuery .each()

类似的东西:

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

这未经过测试,但应该让您走上正确的轨道。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

遍历元素并逐个检查:

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

但为什么不把它放在css中呢?

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