Как рассчитать высоты строк?

Question

[Артем Чернявский]

Добрый вечер!



Есть вот такой макет. В верстке разбит он по колонкам (характеристики | товар | товар | товар | товар)

Подскажите плиз как на js перебрать построчно характеристики и задать высоту по наибольшей ячейки

Comments

[Dima Polos]

Почему бы просто не сделать таблицей? Или надо, чтобы все строки были одной высоты?

[Lynn «Кофеман»]

Не заниматься фигнёй и использовать таблицу которая сделает жто автоматически. Ну или гриды если хочется модно-молодёжно.

[Артем Чернявский]

Dima Polos, Потому что задача поставлена именно так. Нужно чтоб у каждой строки высота была по наибольшей высоте содержащей ячейки.

[Lynn «Кофеман»]

Артем Чернявский, и в таблице так и будет. Магическим образом!

Answer 1

[I'm Yoda]

С jquery как то так.

var isLineHeight = 0;

$('div.line').each(function(){
     if ($(this).height() > isLineHeight ) { 
          isLineHeight = $(this).height(); 
     }
});

$('div.line').height(isLineHeight );

UPD

Для каждой новой строки которую надо подогнать по высоте лучше присвоить индекс, например line-1, line-2 и т.д.

Comments

[Moses Fender]

А ещё у высоты элемента помимо clientHeight есть border-top-width, border-bottom-width, margin-top, margin-bottom. А $(element).height() возвращает только clientHeight.

Answer 2

[Dima Polos]

Убиваете семантику и ограничиваете конечных пользователей в возможностях, которые дают таблицы, делаете интерфейс сложнее в доступе для лиц с ограниченными возможностями и усложняете себе жизнь.
Рекомендую пообщаться с теми, кто ставит задачи и предложить все же таблицу сделать таблицей.
Если все же вопрос стоит сделать так, как в вопросе, то берете родителя, проходитесь циклом по детям, берете высоту каждого ребенка и сравниваете с предыдущим, из двух чисел берете наибольшее и в конце получив макс число задаете его. Еще, флексбокс, по умолчанию, растягивает в строке блоки по высоте максимального, то есть задав дисплей флекс сразу получаете одним свойством все плюшки.

Если интересно, чем таблица хороша, то во-первых она сама растянет строку по макс высоте, раз. Если таблицу выделить и скопировать, то потом можно ее вставить в excell, word, google sheets и куда угодно и вставится именно таблица, а непонятного вида текст, два. Экранные читалки когда видят таблицу помогают ее читать, table, tr, td помогают прочитать и навигировать по таблице не теряя смысл, три.

Answer 3

[SOjuD]

js тут и даром не нужен, вы пытаетесь из пушки по воробьям стрелять, используйте для контейнера display: flex; align-items: stretch; и будет вам счастье

Comments

[Артем Чернявский]

https://www.svyaznoy.ru/compare/category_phone?cit...

[SOjuD]

Артем Чернявский, не вижу проблемы