Jquery在调整大小时使元素与最高元素一样高

Question

我在这里有一个 jsfiddle - https://jsfiddle.net/mx3sqksn/1/

我有两个元素（这里是 p 标签）

他们有不同的高度，但我不知道高度会是多少。

我需要两个元素都和两者中最高的一样高。

我还需要它具有响应性，因此当窗口较小且元素较高时，两者都保持相同的高度。

我知道还有其他方法可以做到这一点，例如 display: table;但我不能在实际代码中这样做。

        var fluid_box = function() {
          var highest = 0;
          var hi = 0;
          $(".text").each(function(){
            var h = $(this).height();
            if(h > hi){
               hi = h;
               highest = $(this).height(); 
            }

            $(".text").css('height', highest);

          });

        }

         // Fire on DOM ready
        fluid_box();

        // Fire upon resize
        $atj(window).resize(fluid_box);

Answer 1

由于您希望它在调整大小时起作用，您需要清除添加的内联高度样式，然后检查最高的。

您可以通过将样式设置为空字符串来清除样式。例如$(".text").css('height', '') 将完全删除内联 height=""。然后高度将是内容的高度，直到您再次将其设置为内联。

JSFiddle：https://jsfiddle.net/mx3sqksn/6/

var fluid_box = function () {
    var highest = 0;
    var hi = 0;
    $(".text").css('height', '').each(function () {
        var h = $(this).height();
        if (h > hi) {
            hi = h;
            highest = $(this).height();
        }

    });
    $('#output').html(highest);
    $(".text").css('height', highest);
}

// Fire on DOM ready
fluid_box();

// Fire upon resize
$(window).resize(fluid_box);

注意：您的 JSFiddle 没有触发调整大小事件，因此将其更改为 $(window).resize(fluid_box);。

Answer 2

$(".text").css('height', highest); 在循环外调用它，两个 div 的高度将相等。