javascript - jQuery Texfill 不适用于具有相同选择器的所有元素

Question

我正在尝试使用 jQuery Textfill使 HTML 列表的内容适合其容器。但是，当我使用相关选项初始化插件时，textfill 插件仅“作用于”选择器的第一个实例。例如

<div id='abc'>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</div>

<script type="text/javascript">
$('#abc').textfill({
    debug: true,
    maxFontPixels: 0,
    innerTag: "li"
});
</script>

只有“foo”会调整大小。这是一个 jsfiddle

有谁知道是否有办法克服这个问题？我错过了某个选项吗？

Answer 1

这是设计使然。根据 $.textfill docs它会添加 :visible:first 到你放在 innerTag 中的任何内容

检查隐藏第一个 LI 时会发生什么:http://jsfiddle.net/9VwV3/

<div id='abc'>
    <ul>
        <li style="display:none;">foo</li>
        <li>bar</li>
    </ul>
</div>