每个元素的高度如果高于则函数答案

【问题标题】：Each element height if higher then function每个元素的高度如果高于则函数
【发布时间】：2011-11-26 17:33:49
【问题描述】：

美好的一天，我正在想办法做些小事。

我在页面上有几个元素需要检查高度，如果高度较高，例如 > 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');
            }
        });      
    }

就是这样。

【问题讨论】：

标签： javascript jquery if-statement each

【解决方案1】：

你需要看jQuery .each()

类似：

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

这未经测试，但应该让你走上正确的轨道。

【讨论】：

如何在.each 循环中正确设置filterHeight？
对不起，我的错误。每次都应该有高度，我已经更新了。

【解决方案2】：

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

【讨论】：

谢谢，下次我应该多思考 5 分钟，在喝完咖啡之后再发帖。

【解决方案3】：

遍历元素并单独检查每个元素：

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

但是为什么不把它放在 CSS 中呢？

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

【讨论】：

谢谢，下次我应该多思考 5 分钟，在喝完咖啡之后再发帖。
因为我不需要所有元素的高度和溢出。
@ignaty，我想我一定是误解了你在做什么。看起来如果你只是想用 javascript 来缩小它们，那么不妨用 css 来做。