Получите кратчайший div после перестройки DOM

Question

Получите кратчайший div после перестройки DOM

0

У меня возникла проблема с поиском кратчайшего div (по его текущей высоте) после восстановления DOM (с.append()). Я хочу добавить данные из массива 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 выбирается. Есть идеи?

puelo 08 нояб. 2013, в 15:45

Источник

0

Какова причина для этого? Не могли бы вы просто указать min-height CSS или фиксированную height ?
AfromanJ 08 нояб. 2013, в 14:43
0

Я динамически загружаю больше данных, и я хочу, чтобы они равномерно добавлялись к элементам div, чтобы сохранять вид одинаковой высоты.
puelo 08 нояб. 2013, в 14:46

Теги:

jquery

html

2 ответа

1

Я не уверен, что это лучший способ сделать это, но это то, что я буду делать

var shortest = null, height = 100000;

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

демонстрация

Sergey Romanov 08 нояб. 2013, в 13:36

0

Та же проблема. Большая часть данных добавляется только в один div. Я не совсем уверен, что вызывает эту проблему .. Я думаю, это потому, что я перебираю массив json, выполняю каждый цикл и добавляю данные к самому короткому ... Может быть, jQuery просто не может справиться с этим`?
puelo 08 нояб. 2013, в 14:57

Ещё вопросы

Какова причина для этого? Не могли бы вы просто указать min-height CSS или фиксированную height ?
Я динамически загружаю больше данных, и я хочу, чтобы они равномерно добавлялись к элементам div, чтобы сохранять вид одинаковой высоты.
Та же проблема. Большая часть данных добавляется только в один div. Я не совсем уверен, что вызывает эту проблему .. Я думаю, это потому, что я перебираю массив json, выполняю каждый цикл и добавляю данные к самому короткому ... Может быть, jQuery просто не может справиться с этим`?

puelo · Accepted Answer · 2013-11-08T12-41-00.000Z

Спасибо за любые предложения. Я заработал. Проблема была не в моем jQuery, а в css из html, который я добавил. Он был установлен в width: auto; поэтому, добавляя его, div имел ширину, равную 5 пикселям. Поэтому многие div могут быть добавлены в один столбец, прежде чем он повлияет на высоту. Установка min-width решила его.