Question

所以我想使用Stack Overflow为我提供的这个JQuery插件：）

Auto-size dynamic text to fill fixed size container

但是，我需要在动态创建服务器端的HTML元素上使用它。例如，

我创建了所有元素，将它们转换为HTML，然后将它们作为基本的Json字符串数组（以HTML格式）返回到前端：

public JsonResult GetMessages()
{
    // do conversion work
    List<string> htmlMessages = new List<string>();
    foreach(Message message in this.messages)
    {
        htmlMessages.Add(message.toHTML());
    }
    return Json(htmlMessages);
}

然后在前端我将它们附加到Jquery中的div，如下所示：

// make my AJAX call
// in the success method I do this
for (var i = 0; i < data.length; i++)
{
    $('#containerDiv').append(data[i]);
}

现在这样可以正常工作，但是我如何在附加的每个元素上调用JQuery插件来格式化元素中divs之一的文本大小？

Answer 1

我不知道HTML本身是什么样的，但尝试这样的事情：

// snip...
var $container = $('#containerDiv');
for (var i = 0; i < data.length; i++)
{
    $container.append(data[i]);
}
$container.children('div').textfill({ maxFontPixels: 36 });

看起来插件依赖于包含单个<span>元素的元素，因此您的HTML可能必须相应地构建。同样基于wee little test，当在包含多个元素的jQuery集合上调用时，看起来插件无法正常工作。简单的解决方法：

$container.children('div').each(function ()
{
    $(this).textfill({ maxFontPixels: 36 });
});

“正确的方法”是实际更改插件，但是：

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        this.each(function () {
            var $this = $(this),
                ourText = $this.find('span:visible:first'),
                maxHeight = $this.height(),
                maxWidth = $this.width(),
                textHeight,
                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;
    }
})(jQuery);

所以你改变了插件，它会在容器div中找到的每一个跨度上调用它吗？

不完全。我的更改意味着您可以替换

$container.children('div').each(function ()
{
    $(this).textfill({ maxFontPixels: 36 });
});

与

$container.children('div').textfill({ maxFontPixels: 36 });

Answer 2

您可以使用.load（）事件在动态添加dom元素时添加插件。 http://api.jquery.com/load-event/

// make my AJAX call
// in the success method I do this
for (var i = 0; i < data.length; i++)
{
var elem = data[i];
elem.load(function(){
// Plugin here.
});

    $('#containerDiv').append(elem);
}

Answer 3

这听起来像是livequery的工作，它允许您在元素动态添加到DOM时运行函数。

使用JQuery插件动态创建HTML

3 个答案: