jquery将img下的高度与h2的高度进行比较

我想改编这个：

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)*$/, '...'); }); } 

如下所述： 交叉浏览器多行文本溢出，省略号附加在宽度和高度固定div？

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

例：

 
 
 .... 
Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna
 ... 
 
 
 
 .... 
5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna
 ... 

http://sofzh.miximages.com/javascript/lI82f.jpg

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

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

编辑：

所以我只想弄清楚解决这个问题的最佳方法是将高度设置为h2标签，然后将其内容高度与设置高度进行比较。

Answer 1

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

 $('.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演示

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

正如我在原始问题中所说，这只是一个想法，而不是准备用于生产的东西。 它非常沉重，可能不是所有用例的最佳解决方案。

Answer 2

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

其次，你不需要在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链接

Answer 3

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

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

但实际上我认为你想使用.each（）jquery方法，比如

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