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

Question

I'm trying to use jQuery Textfill to make an HTML list's contents fit their container. However, when I initialize the plugin with the relevant options, the textfill plugin only "acts" on the first instance of the selector. Eg

<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>

Only "foo" gets resized. Here's a jsfiddle

Does anyone know if there's a way to overcome this? Have I missed a certain option?

Answer 1

This is by design. According to $.textfill docs it will add :visible:first to whatever you put in innerTag

Check what happens when the first LI is hidden: http://jsfiddle.net/9VwV3/

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