javascript - 如果换行符上有孤立单词，jQuery 不会计算正确的文本高度

Question

如果您查看我正在开发的此页面:http://dev.aaronpitts.ch/test/您将看到行中的三个绿色按钮，上面写着“了解更多”。我试图使用以下 jQuery 让它们始终对齐:

var maxHeight = 0;

$(".same-height-inner").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".same-height-inner").height(maxHeight);

.same-height-inner 中的 p block 的 margin-bottom 为 20px 底部，但这不包含在 .same-height-inner 的高度中。另外，如果您在 1024 x 768 的屏幕尺寸上查看此内容，您会发现左侧列的文本在高度上进一步错误计算，因为它不包括断为新行的孤立单词。我尝试过使用

outerHeight(true)

但这没有什么区别。如何才能实现上述目标？

Answer 1

您可以简单地将 .find('p') 添加到您的 jQuery 代码中，因此它将是:

var maxHeight = 0;
$(".same-height-inner").find('p').each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);

如果您使用outerHeight(true)，则同样的方式，例如，我使用以下代码:

function calculateHeight($el) {
   var height = 0;
   $el.children().find('a').each(function() {
      height = height + $(this).outerHeight(true);
    });
   $el.data('oHeight', height);
}

祝你好运。