How to set textarea height with jQuery

There is a table and many textareas in some cells. The cells with textarea span multiple row (2, 3, 4, or more rows). I want开发者_如何学C to make textareas occupy the whole cell areas.

I can do this with jQuery but it takes too long and the browser gives a warning.

$("textarea").each(function() {
  $(this).height($(this).parent().height());
});

Is there a better way?

Thanks.

Sam

Am I missing something or why can't you just use css style height:100% on the textareas?

See this jsFiddle: http://jsfiddle.net/J2njk/

I turned up this test:

http://jsperf.com/jquery-each-vs-for-loop/4

Which (after running the tests) shows that .each() is eclipsed by other iterators in terms of performance. If you can devise a way to use one of the high-performing iterators shown on that page, you will obviously see better results.

edit: this WORKS, but whether or not there's a performance benefit I can't say:

http://jsfiddle.net/T7wzT/1/

var $textarea = $('textarea');
numTextareas = $textarea.length;
for (var i = 0, len = numTextareas; i < len; i++) {
 $textarea.eq(i).height($textarea.parent().height());
}