Javascript 当取决于屏幕分辨率时，如何计算每行显示的div数

我有以下代码：

HTML

问题是，

.option holder

div不能只放在我的

.content box

div的一行中，因此我必须隐藏它们，并创建一个show more/less切换按钮来显示或隐藏其余部分

一切正常，直到我只有特定数量的

.option holder

div，只适合一行，所以我不需要切换按钮（div的数量来自服务器）

我目前的解决方案是计算div的数量，并且仅当它们超过4时才显示切换按钮（在大多数屏幕分辨率中，我每行获得4个div）。 问题是当屏幕分辨率更大时，我每行得到5或6

如果我每行有6个div，但只有5个div要显示，那么按钮仍然存在，因为我在4个div之后显示它

我知道有很多简单的修复方法，但我不允许重写代码和更改其逻辑，因此我必须找到一种方法来计算一行中每次显示多少个div

现在，代码只需在每次单击按钮时更改div

.content

上的高度，即可显示或隐藏其余div，而无需为“not show”div提供任何额外属性，例如使用

style=“display:none；”

任何建议？？？

var divs=document.querySelectorAll（'.options holder'）；//或getElementsByClassName…或仅$（'.options holder'）。。。。。
var divs = document.querySelectorAll('.options-holder'); //or getElementsByClassName... or just $('.options-holder').....
var x = divs.length;
var number_of_elements_in_first_row = 0;
for ( var i = 0; i < x; i++;) {
    if ( divs[0].offsetHeight !== divs[i].offsetHeight ) {
        divs[i].style.display = "none"; // hide divs[i]
        /* or if you need only number of elements per row
           add this instead hiding elements */
        number_of_elements_in_first_row = i;
        break;
    }
}

if ( divs[0].offsetHeight !== divs[x].offsetHeight )
    // add/show your MORE button... your function call

var x=divs.length；
第一行中元素的变量数=0；
对于（变量i=0；i

所以，主要思想是，如果有多行，最后一个元素将具有不同的垂直位置

编辑： 这段代码将遍历目标div数组并隐藏所有未与第一个div垂直对齐的div

var divs = $('.options-holder');

for(var key in divs){
    if (key > 0){
        if (divs[0].offsetLeft == divs[key].offsetLeft) {
            $("#showMoreButton").css("display", "block");
        }
    }
}

---

这是所需的解决方案，因为

。offsetLeft

在每一行的每个第一个div中都是相同的。

我知道我的问题不完整，但不幸的是，我不能发布更多的代码使其在JSFIDLE中工作。对不起。我刚刚发布了，但在我的情况下它不起作用。问题是我的div不在实际的两行中（正如您从我的html中看到的）因此divs.length只返回我的divs.Aaaa的总数，我想我现在明白了。您的问题不仅仅是“是否应该显示切换按钮”，还应该隐藏哪些div？我将更新我的答案。让我知道这次我是否正确理解了您：）

var divs = document.querySelectorAll('.options-holder'); //or getElementsByClassName... or just $('.options-holder').....
var x = divs.length;
var number_of_elements_in_first_row = 0;
for ( var i = 0; i < x; i++;) {
    if ( divs[0].offsetHeight !== divs[i].offsetHeight ) {
        divs[i].style.display = "none"; // hide divs[i]
        /* or if you need only number of elements per row
           add this instead hiding elements */
        number_of_elements_in_first_row = i;
        break;
    }
}

if ( divs[0].offsetHeight !== divs[x].offsetHeight )
    // add/show your MORE button... your function call

var divs = $('.options-holder');

for(var key in divs){
    if (key > 0){
        if (divs[0].offsetLeft == divs[key].offsetLeft) {
            $("#showMoreButton").css("display", "block");
        }
    }
}