0

在 DOM 重建（使用 .append()）之后，我无法找到最短的 div（根据它的当前高度）。我想一个接一个地从一个 json 数组中附加数据，但总是附加到当前最短的 div （以使它们的高度均匀）。这是我的 HTML 的样子：

<div class="article_column" id="data0"></div>
<div class="article_column" id="data1"></div>
<div class="article_column" id="data2"></div>
<div class="article_column" id="data3"></div>

这就是我目前在 jquery 中所做的事情：

 $.each(data, function (i, column) {
     var shortest = [].reduce.call($(".article_column"), function (sml, cur) {
         return $(sml).height() < $(cur).height() ? sml : cur;
     });
     $(shortest).append(column.html);
 });

这似乎有点工作，但仅适用于前 4 个元素左右。之后，大部分数据都被附加到一个 div 中。显然这不是我要找的。我的代码有问题吗？我怀疑 DOM 没有快速更新，因此选择了错误的 div。有任何想法吗？

4

2 回答 2

1

我不确定这是最好的方法，但这是我会做的

var shortest = null, height = 100000;

$.each($('.article_column'), function(k, v){
  if(parseInt($(v).height()) < height) {
      shortest = $(v);
      height = $(v).height();
  }
});

演示

于 2013-11-08T14:52:39.173 回答
0

感谢任何建议。我让它工作了。问题不是我的 jQuery，而是我附加的 html 的 css。在附加它时设置为width: auto;so，div 的宽度只有 5 个像素。因此，在影响高度之前，可以将许多 div 附加到一列。设置一个min-width解决了它。

于 2013-11-08T15:12:29.580 回答