Question

我知道他们在这里的相关主题和更好的方法是使用flexbox。但我怎么能做出这样的事情？

查找每个.grid元素的每个直接子元素
找到最高元素并将其设置为兄弟姐妹

让我们说我有这个HTML

<div class="grid">
  <div class="col-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia saepe veritatis, veniam! Quisquam quis tenetur eius, debitis possimus expedita eligendi amet incidunt quo. Alias dolores, amet error aperiam, quaerat cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur provident consequatur, id corrupti, vitae, sapiente, ipsa explicabo ad eaque impedit alias vel. Explicabo esse odit, autem ab eius rerum odio.
  </div>
  <div class="col-2">
    short
  </div>
</div>

<div class="grid">
  <div class="col-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia saepe veritatis, veniam! Quisquam quis tenetur eius, debitis possimus expedita eligendi amet incidunt quo. Alias dolores, amet error aperiam, quaerat cumque.
  </div>
  <div class="col-2">
    short
  </div>
</div>

有点css：

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  border: 1px solid black;
}

.col-3 {
  width:  30%;
}
.col-4 {
  width:  40%;
}
.col-2 {
  widdth: 20%;
}

目标是在第一个网格集.col-2中与.col-3具有相同的高度，而对于第二个.grid执行相同的操作。

这是我的jQuery：

$(".grid").each(function(){
  $(this).children().each(function() {
    var height =  $(this).height();
    console.log(height);
  });
});

Codepen在这里：http://codepen.io/anon/pen/amzkqy?editors=1011

Answer 1

试试这个：

var max = 0;
$(".grid").each(function(){
  var children = $(this).children();
  children.each(function() {
    if (max < $(this).height()) max = $(this).height();
  });
  children.each(function() {
    console.log(max);
    $(this).height(max);
  })
});

它从孩子那里获得最大高度，然后将高度设置为最大值。

Answer 2

如果我明白你的意思，那应该适合你：

$(".grid").each(function(){
  var height = 0;
  $(this).children().each(function() {
    height = ($(this).height() > height) ? $(this).height() : height ;
    console.log(height);
  });
  $(this).children().each(function() {
    $(this).height(height);
  });
});

祝你好运！

jQuery - 每个元素和每个孩子得到和设置的高度

2 个答案: