Javascript 每行的列数相等

我有一个产品画廊，需要在家长和孩子的高度相等

我需要计算每一行。但我得到的是最高的孩子，它应用于所有的div。我想要的是得到最高的div，并按行应用它

$(document).ready(function() {
 var item_title_height = 0;
 var item_details_height = 0;

 $('.item-title').each(function(i, obj) {
    if($(this).height() > item_title_height) {
    item_title_height = $(this).height();
  }
 });

 $('.item-details').each(function(i, obj) {
    if($(this).height() > item_details_height) {
    item_details_height = $(this).height();
  }
 });

$(".item-title").height(item_title_height);
$(".item-details").height(item_details_height);

});

这是我的小提琴

---

希望您能帮助我

我不确定在jQuery中您将如何做到这一点。但是你可以很容易地找到最大的一份香草。使用window.getComputedStyle获取可能没有显式css或html样式声明的元素的样式信息

var heights = Array.prototype.slice.call(document.getElementsByClassName('item-title')).map(function(i){
    var cs = window.getComputedStyle(i,null)
    return parseFloat(cs.getPropertyValue("height"))
});
alert(Math.max.apply(null,heights))

---

因此，我推断如下：您希望查看每一行，找到该行中最高的div，并将该行中的所有div设置为该高度。这意味着并非所有行的高度都相同，但行中的所有列的高度都相同

要做到这一点，您需要有一种按行分组的方法。我更改了您的html，使每3个子div包装在一个“row”div中

查看更新的小提琴：（编辑-固定链接）

---

您需要遍历每一行，然后遍历该行中的每个div，并将更改应用于该行中的所有div。希望有帮助

也许你可以使用CSS和javascript来实现这一点

//JS可能不是必需的

.row{
显示器：flex；
柔性包装：包装；
}
.物品容器{
宽度：350px；
flex:1自动；
保证金：5px；
边框：实心；
显示器：flex；
弯曲方向：立柱；
背景：灰色；
填充：0！重要；/*覆盖IDES引导*/
}
.项目详情{
弹性：1；
背景：白色；
}
.项目按钮{
保证金：5px；
文本对齐：右对齐；
}
/*图像宽度是否有点响应*/
img{
宽度：100%；
最大宽度：500px；
保证金：自动；
}

标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题标题标题标题标题标题标题标题标题标题
详情1

详情2

详情3

添加到购物车
标题标题
详情1

详情2

添加到购物车
标题标题标题标题标题标题
详情1

详情2

详情3

详情4

详情5

详情6

添加到购物车
标题标题标题标题标题标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题
详情1

添加到购物车
标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题标题标题标题标题标题标题标题标题标题
详情1

详情2

详情3

详情4

详情5

添加到购物车
标题标题
详情1

添加到购物车
标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题标题标题标题标题标题标题标题标题标题
详情1

详情2

详情3

添加到购物车
标题标题
详情1

详情2

详情3

添加到购物车
标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题标题标题标题标题标题标题标题标题标题
详情1

详情2

详情3

详情4

添加到购物车
标题标题
详情1

详情2

详情3

详情4

添加到购物车

事实上，这是一个电子商务网站，我无法在多行中创建列。它必须是一行，其余的将是列。我只想说，有一些按行划分的方法会对您有很大帮助，不应该太复杂。

$(document).ready(function() {


  $('.row').each(function(){
    var item_title_height = 0;
    var item_details_height = 0;
    $(this).find('.item-title').each(function(i, obj) {
        if($(this).height() > item_title_height) {
          item_title_height = $(this).height();
        }
    });

    $(this).find('.item-details').each(function(i, obj) {
        if($(this).height() > item_details_height) {
          item_details_height = $(this).height();
        }
    });

    $(this).find('.item-title').height(item_title_height);
    $(this).find('.item-details').height(item_details_height);
  });
});