javascript - jQuery .each 函数创建无限循环？

Question

我认为我的代码正在创建一个无限循环。

1. 页面永远不会完成加载。
2. 它“锁定”并且 Chrome 被迫终止违规页面。
3. 控制台不刷新，所以我无法读取错误。

我试图解决的问题是有些文本元素有时太宽，但调整所有文本的大小会使其中一些变得非常小。

我的解决方案是转到每个 header ('.mftitle h1') 并将其与它的容器 ('.ut-one-third') 进行比较始终是可接受的宽度。如果 header 比容器宽，则它会减小字体大小，直到不再如此为止。

jQuery( document ).ready(function() {

  jQuery('.mftitle h1').each(function() {

    var container = jQuery(this).closest('.ut-one-third');

    while( jQuery(this).width() > jQuery(container).width() ) {

      jQuery(this).css('font-size', (parseInt(jQuery(this).css('font-size')) - 1) + "px" );

    }

  });

});

感谢您的帮助!我很难过。如果这是一个糟糕的解决方案，我深表歉意，我正在自学 jQuery。

Answer 1

由于 h1 是一个 block 元素，无论字体大小如何，它都将占用容器的宽度除非指定。这意味着如果 while 循环至少迭代一次就永远不会为假。

如果想让h1取content的宽度，需要在display inline-block中设置， float 或者通过绝对定位使其出框。

这里有一个例子:http://jsfiddle.net/fWtwL/

部分代码已修改。