javascript - 使用 javascript 或 jQuery 匹配循环中项目的宽度

Question

我创建了一个函数来匹配循环中某些元素的宽度，这些元素将在循环中将自身扩展到最大宽度元素。

// Function: Match width
var _so20170704_match_width = function( item ) {
    var max_item_width = 0;

    item.each(function(index) {
        max_item_width = Math.max( max_item_width, parseInt( $(this).width() ) );
    });

    // might not necessary
    // but taking time, to keep the elements' default width intact
    // while looping through 'em
    setTimeout(function() {
        item.width(max_item_width);
    }, 100);
}

我这样调用它:

_so20170704_match_width( $('.match-width') );

它按预期工作。

问题

问题是，并不是所有的页面刷新都可以。在某些页面上，刷新 .width() 的行为就像采用 .outerWidth() 或类似的方式。因为设置的宽度有点宽。

使用 console.log($(this).width()) 和 console.log(max_item_width) 我得到的值如下:

+====================+=======+
|                ×   |   ✓   |
+====================+=======+
| this_item:    177  |  152  |
| max_width:    177  |  152  |
+--------------------+-------+
| this_item:    174  |  150  |
| max_width:    177  |  152  |
+--------------------+-------+
| this_item:    229  |  196  |
| max_width:    229  |  196  |
+--------------------+-------+
| this_item:    265  |  232  |
| max_width:    265  |  232  |
+====================+=======+
| max_width:    265  |  232  |
+====================+=======+

Here, × denotes "Not working width identification", and ✓ denotes "Working width identification".

Why the .width() is varying on the same element on some of the page refresh? If I press Ctrl + F5 to clear cache and refresh, it's a ×. And after that, if I continuously refresh the page with F5 only, it's a ✓. I kept the page idle for some time, then I pressed F5, but it's a ×.

Why?

What I tried

It's even behaving the same whether I change the calculation to a manual one:

if( parseInt( $(this).width() ) > max_item_width ) {
    max_item_width = parseInt( $(this).width() );
}

我还花了一些时间设置宽度，将 100 替换为 1000，但行为是相同的。

编辑: fiddle

jQuery(document).ready(function($) {

  // Function: Match width
  var _so20170704_match_width = function(item) {
    var max_item_width = 0;

    item.each(function(index) {
      max_item_width = Math.max(max_item_width, parseInt($(this).width()));
    });

    // might not necessary
    // but taking time, to keep the elements' default width intact
    // while looping through 'em
    setTimeout(function() {
      item.width(max_item_width);
    }, 100);
  }

  _so20170704_match_width($('.package-title'));
  
});

*,
 :after,
 :before {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
}

.package-title {
  color: #fff;
  background-color: #414142;
  border: 1px solid #fed307;
  border-radius: 10px;
  padding: 1px 15px 13px;
  display: inline-block;
  position: relative;
  font-size: 28px;
  z-index: 9;
}

.package-subtitle {
  display: block;
  position: absolute;
  bottom: 0;
  left: 100px;
  padding: 1px 5px;
  font-size: 14px;
  background-color: #fed307;
  color: #414142;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:700" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<article class="package-holder">
  <h2 class="package-title">Package 1 Title<span class="package-subtitle">Package 1 Subtitle</span></h2>
</article>

<article class="package-holder">
  <h2 class="package-title">Package 2<span class="package-subtitle">Package 2 Subtitle</span></h2>
</article>

<article class="package-holder">
  <h2 class="package-title">Package 3 Ttl<span class="package-subtitle">Package 3 Subtitle</span></h2>
</article>

<article class="package-holder">
  <h2 class="package-title">Package 4 Title Larger<span class="package-subtitle">Package 4 Subtitle</span></h2>
</article>

嫌疑人:嵌入字体

在制作 fiddle 时，我怀疑字体嵌入可能会导致问题。我尝试禁用代码中的所有 @font-face 声明，然后当我刷新(通过任何方式)时，它表现得非常完美。

所以注意到的问题是:
清除缓存后，嵌入的字体会自行刷新，并且 jQuery 函数会检测默认字体的宽度(宽度:265，使用默认字体确认)。但随后加载了压缩嵌入字体，并且宽度缩小了一点。这就是导致问题的原因。

Answer 1

好吧，在根据 @MehulJoshi 的建议制作 Fiddle 时，我怀疑是嵌入的压缩字体导致了这个问题。所以我正在寻找一种方法来检查所有字体是否已加载。

在this StackOverflow thread的帮助下我更改了以下代码行:

_so20170704_match_width( $('.match-width') );

使用下面的代码:

document.fonts.ready.then(function () {
    _so20170704_match_width( $('.match-width') );
});

使用前请阅读随附的 SO 线程。这是一项新功能，适用于 Chrome 35+ 和 Firefox 41+。

解决问题的方法是:

• 当所有嵌入字体准备就绪时(这一点至关重要)
• 检查宽度
• 获取最大宽度
• 设置最大宽度