jQuery while 循环过早停止

Question

我正在开发我的第一个 Wordpress 插件，一个简单的链接周期性 table 简码。我在其中设置了一个 jQuery 脚本，可以缩小 table 中的字体大小以适应其父级。但是，循环很快停止，留下 table 的一部分位于父级的填充中。有人能告诉我我做错了什么吗？

我的javascript:

jQuery(".periodic-table").each(function(index, element) {
    var textSize = 100;
    while (jQuery(element).width() > jQuery(element).parent().width()) {
        textSize -= 1;
        jQuery(element).css('font-size', textSize);
    }
});

以及完整的项目： https://github.com/Renkin42/WP_Plugin_PeriodicTable

编辑：我提供了一个 jsfiddle 版本，但出于某种原因，它的行为方式完全不同。这个似乎更可靠，但由于某些奇怪的原因往往会过冲，使其小于应有的大小而不是更大。不管怎样，给你：https://jsfiddle.net/rsvjwy2b/1/

Answer 1

您的问题源于您的错误假设，即仅仅因为子项的内容超出其父项的范围，子项的宽度就大于父项的宽度。

没有看到你的 HTML，我猜它是这样的：

<div class="wrap">
    <div class="periodic-table">Hello There! Hello There!</div>
</div>

当你执行你的代码时，它会比较两个元素的宽度，发现子元素的尺寸已经等于或小于父元素，然后什么都不做就退出了。文字突出，但这只是意味着内容溢出 .periodic-table，而不是 .wrap。

您可以通过 .periodic-table 显示属性 inline（或 inline-block）

来解决这个问题

.periodic-table {
    display: inline;
}

内联元素的宽度基于内容 - 溢出不是等式的一部分。您的当前工作正常。

Fiddle

Answer 2

好的，问题解决了。某种奇怪的加载顺序问题。使用 jQuery(window).load() 修复它，而不是在查询时盲目地运行。抱歉给您带来麻烦。

jQuery while 循环过早停止

jQuery while loop stopping prematurely

wordpress

jquery

while-loop