javascript - $ 函数根据元素所在容器的高度切换元素

标签 javascript jquery css math responsive

我有这个函数需要根据#recent 容器的高度显示行数。

假设我们不知道#recent 的高度,但 .row 的高度是 const 34px。问题是我们需要隐藏所有第 n 个子行(n+ 取决于数字)。

假设如果#recent 的高度是 100 像素,我们只需要显示 2 行(因为如果我们显示 3 行,则高度需要超过 102 像素)

var thisFunc= function() {

    var h = $('#recent').height();
    var nr = Math.round(parseInt(sectionHeight) / parseInt($('.row').height()));

    var x = nr - 1;
    var nth = $('.row:nth-child(n+'+x+')');
    nth.addClass('hideMe');

}

thisFunc();
$(window).resize(thisFunc);

我们现在只显示需要的行数。但是问题是当我们增加窗口的大小时它们不会出现。他们添加了“hideMe”类,但我不确定如何切换它。

有什么想法吗?谢谢!

最佳答案

var thisFunc= function() {
// reset childs
$('.row').removeClass('hideMe');


var h = $('#recent').height();
var nr = Math.round(parseInt(sectionHeight) / parseInt(

$('.row').height()));

    var x = nr - 1;
    var nth = $('.row:nth-child(n+'+x+')');
    nth.addClass('hideMe');

}

关于javascript - $ 函数根据元素所在容器的高度切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44508482/

相关文章:

javascript - 检查复选框是否被选中,返回 addEventListener 不是一个函数

javascript - 如何使对象的名称成为变量的值?

jQuery masonry 附加结果仅显示在单列中

javascript - 使用 jQuery 对插入的元素进行动画处理

javascript - 在 react js中获取文件类型

javascript - 使用javascript动态创建元素

php - 在 jQuery datepicker 中更改与 MySQL 格式相同的日期格式

javascript - 更改最后的属性值

jquery - 相对父项中的绝对元素 - 不与其他父项重叠

javascript - 不完全是六 Angular 形的 CSS 边框