在多个元素上运行 JavaScript 函数..？答案

【问题标题】：Run JavaScript function on multiple elements..?在多个元素上运行 JavaScript 函数..？
【发布时间】：2011-08-02 11:03:17
【问题描述】：

我对 JavaScript（当然还有 jQuery）很陌生，所以我正在寻求一些帮助...... 此 JavaScript 函数会根据容器 div 更改字体大小。

http://jsfiddle.net/pthjU/

我需要它适用于所有 div（最终属于某个类） - 但它只从第一个中获取信息，并根据该类调整它们的大小。有什么想法吗？

不是在寻找复制/粘贴的答案，我想正确地解决这个问题。谢谢！

【问题讨论】：

标签： javascript jquery fonts size containers

【解决方案1】：

由于您想独立处理每个元素，您可以在插件中执行此操作，方法是在那里执行 .each() 循环，而不是这样：

$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
        ourText.css('font-size', fontSize);
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    return this;
}

应该是这样的：

$.fn.textfill = function(options) {
    return this.each(function() {
        var fontSize = options.maxFontPixels;
        var ourText = $('span', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    });
};

You can test it here

顺便说一句，从旧方法...this 已经是插件内的一个 jQuery 对象（注意我是如何直接在其上调用 .each() 的），无需将其包装在另一个 jQuery 对象中（克隆它）。您确实需要将它包装在我的第二个示例inside循环中，因为在.each() 中您指的是单个DOM 元素，而不是jQuery 对象。

【讨论】：

啊，我明白了，非常感谢。不幸的是，我太菜鸟了，无法在 JsFiddle 之外工作 - 我在 $(window).load 之后调用该函数，并仔细检查了我是否包含了 jquery ...也许我错过了其他东西？ :S
哦，只是忘记将段落的边距和内边距设置为 0 =.=

【解决方案2】：

将 .each() 添加到

$('.post').each().textfill({ maxFontPixels: 500 }); <--- not sure if this works.. but

$('.post').each(function(){
    jQuery(this).textfill({ maxFontPixels: 500 });
});

应该肯定有效。

艾伦

【讨论】：

哈！就这么简单，你建议的第二个很有魅力。非常感谢。婴儿步;)