Question

我正在处理我的第一个Wordpress插件，一个简单的链接周期表短代码。在其中我设置了一个jQuery脚本，缩小表中的字体大小以适应其父级。但是，循环停止，使表的一部分位于父级填充中。有人能告诉我我在这里做错了吗？

我的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;
}

内联元素＆＃39;宽度基于内容 - 溢出不是等式的一部分。你现在的工作正常。

Fiddle

Answer 2

好吧，问题解决了。某种奇怪的装货订单问题。使用jQuery（window）.load（）修复它，而不是在enqued时盲目运行。抱歉，麻烦。

jQuery while循环过早停止

2 个答案: