jQuery Equal Heights of Divs

Question

У меня есть два столбца, в которых есть перетаскиваемые и сбрасываемые элементы div. Я использовал этот код:

`//Equal Height Divs
        function equalHeight( group ) {
            var tallest = 0;
            group.each(function() {
                var thisHeight = $(this).height();
                if(thisHeight > tallest) {
                    tallest = thisHeight;
                }
            });

            group.each(function() {
                $(this).css( "min-height", tallest );
            } );
        }`

чтобы убедиться, что чем больше элементов div добавлено в один столбец, а высота столбцов увеличивается, тем больше будет высота второго столбца.

Однако я, похоже, не знаю, как изменить это так, чтобы, если я уберу вещи из одного столбца, и высота div обоих столбцов уменьшится. Я знаю, что я слишком усложнил это, поэтому любая помощь, чтобы разобраться в моем замешательстве здесь, будет высоко ценится, Спасибо

Answer 1

Я думаю, что понимаю ваш вопрос только до определенной степени. Если вы пытаетесь установить высоту элементов с высотой самого высокого элемента, вы можете использовать этот код. Предполагается, что элементы, над которыми вы работаете, имеют один и тот же класс.

var maxHeight = Math.max.apply(null, $('.common_classname').map(function() {
                return $(this).height();
        }).get());

$('.common_classname').height(maxHeight);

Answer 2

Просто добавьте $(this).css("height", "");, чтобы сбросить атрибут CSS height, чтобы высота не была больше необходимой.Без установленного свойства height элемент будет уменьшен до минимальной высоты:

    function equalHeight( group ) {
        var tallest = 0;
        group.each(function() {
            $(this).css({height:"", "min-height":""});
            var thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });

        group.each(function() {
            $(this).css( "min-height", tallest );
        } );
    }