每个元素的高度（如果更高）则起作用

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的块并添加了类。

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');
            }
        });      
    }

就这样。

Answer 1

您需要查看jQuery .each（）

就像是：

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

这未经测试，但应该使您走上正确的道路。

Answer 2

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

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