javascript - jQuery script efficiency -

i use below jquery function named textfill on hundreds of divs. resizes inner text fit enclosing div such font-size of text maximum, longer texts smaller shorter ones @ maximum font size can without overflowing div.

; (function($) {     /**     * resizes inner element's font inner element fills outer element.     * @version 0.1     * @param {object} options maxfontpixels (default=40), innertag (default='span')     * @return outer elements processed     * @example <div class='mybigdiv filltext'><span>my text resize</span></div>     */     $.fn.textfill = function(options) {         var defaults = {             maxfontpixels: 40,             innertag: 'span'         };         var opts = jquery.extend(defaults, options);         return this.each(function() {             var fontsize = opts.maxfontpixels;             var ourtext = $(opts.innertag + ':visible:first', this);             var maxheight = $(this).height();             var maxwidth = $(this).width();             var textheight;             var textwidth;             {                 ourtext.css('font-size', fontsize);                  textheight = ourtext.height();                 textwidth = ourtext.width();                 fontsize = fontsize - 1;             } while ((textheight > maxheight || textwidth > maxwidth) && fontsize > 3);             var pos = (maxheight-textheight)/2;             ourtext.css('top', pos +'px');         });     }; })(jquery); 

because run script on hundreds of divs like:

<div class="textdiv"><span>text appears here</span></div> 

at same time using:

$('.textdiv').each(function() { $(this).textfill({ maxfontpixels: 28 })});   

it takes 40 70 seconds depending on amount of divs. desperately need tune code run faster. i've tried last 2 hours can't seem make run faster. can help?

edit:

took input comments , changed code to:

var items = document.getelementsbyclassname("textdiv"); (var = items.length; i--;) {     $(items[i]).textfill({ maxfontpixels: 28 }); } 

it seems bit faster still slow.

$('.textdiv').each(function() { $(this).textfill({ maxfontpixels: 28 })});

you're using function wrong. every (proper) plugin work on jquery collections, , has each built-in not need put around invocation. do

$('.textdiv').textfill({ maxfontpixels: 28 }); 

yet think not actual problem; loops quite fast , hundred items won't take seconds. problem is

            ourtext.css('font-size', fontsize);             textheight = ourtext.height();             textwidth = ourtext.width(); 

inside loop (actually in 2 nested loops), requires complete reflow browser. need minimize calls part, example using kind of binary search (bisection) and/or applying interpolation metric approximates font size (number of characters divided area example?) starting value.

beside that, there might other minor optimisations:

• cache $(this)
• $(opts.innertag + ':visible:first', this); looks quite complex selector. necessary, expect hidden elements? move such extras options, , go $(this).children().first() default.
• i'm not sure css, how set dimensions of divs (which retrieve maxheight/maxwidth)? reducing reflow costs when changing fontsize inside, additional overflow:hidden can help.