jquery比较img下面的高度和h2的高度

Question

我正在尝试适应这个：

var h2=$('.block h2');
var divh=$('.block').height();
while ($(h2).outerHeight()>divh) {
    alert('enters while');
    $(h2).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

这里解释：Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

我遇到的问题是我有各种li，其中每个都包含一个.block，每个li都有一个h2标签

例子：

<li>
<div class="block">
....
<h2>Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...
</div>
</li>

<li>
<div class="block">
....
<h2>5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...

http://i.stack.imgur.com/lI82f.jpg

将.block 设置为200px，将img 设置为height: 90px; 和padding: 5px 现在我需要将img 下方的高度与h2 的高度进行比较。

但它也不起作用，它只是不做if，但divh包含数据（200，css中设置的200px）。

编辑：

所以我发现解决此问题的最佳方法是将高度设置为h2 标签，然后将其内容高度与设置的高度进行比较。

Answer 1

我认为你可能有几个问题，首先你在我认为你真正想做的“while”行上有一个错字

while ($('h2').outerHeight()>divh) {

但我真的认为你想使用 .each() jquery 方法，比如

$('h2').each(function(i) {
  if ($(this).outerHeight() > divh) {
    //...
  }
});

Answer 2

这样的东西可以正常工作：

$('.block').each(function (i, el) {
    var $h2 = $(el).find('h2');
    var divh = $(el).height();
    while ($h2.outerHeight() > divh) {
        $h2.text(function (index, text) {
           return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsFiddle Demo

你应该使用.block { word-wrap: break-word; }（或者在那些长长的h2文本中加入一些空格）让它们中断并帮助产生效果。

正如我在original question 中所说的，这只是一个想法，而不是准备在生产中使用的东西。它非常依赖 DOM，可能不是所有用例的最佳解决方案。

Answer 3

首先，您的正则表达式仅适用于空格分隔的单词。像你这样的长字符串不会被缩短。

其次，在 while 条件下，您不需要在 h2 var 上使用另一个选择器。

第三，.each 绝对是必需的。

var h2=$('.block h2');
h2.each(function(){
    var divh=$(this).closest('.block').height();
    while ($(this).outerHeight()>divh) {
        $(h2).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsfiddle link