javascript - 每个元素的高度如果高于则函数

Question

美好的一天，我正在尝试弄清楚如何做一些小事。

我在页面上有几个元素需要检查高度，如果高度较高，例如 > 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 的 block 并添加了类。

2) 在我调用 Ajax/JOSN 并且它为我提供了这些 block 的新数据之后，我需要检查这些元素的高度变化。因此，在 .ajax 完成后，我删除了类并再次检查。

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

仅此而已。

Answer 1

您需要查看jQuery .each()

类似于:

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

这尚未经过测试，但应该会让您走上正确的道路。