Question

I have a collection of textareas I am getting using a selector. I am then iterating through and trying to set the max width for each based on its current width(they are not all the same, that is why I am doing it this way). However, I can not access the .css property of the elements in the array, I guess because they are HTMLTextAreaElements? Is there a way to make this work or a better way to approach this?

I can not set the max width statically because this is a generic control that is used in a variety of pages and with a variety of different sizes.

$(function () {
var a = $('.myTextAreaCssClass');
for(var i = 0;i < a.length; i++) {
var w = a[i].css(width);
a[i].css('max-width',w);
}
});

Answer 1

I think you should use $.each. Try this,

$(function () {
   var a = $('.myTextAreaCssClass');
   a.each (function () {
      $(this).css('max-width', $(this).css('width'));
   });
});

or you can make use of css function argument as given below,

$(function () {
   var a = $('.myTextAreaCssClass');
   a.css ('max-width', function () {
      return $(this).css('width');
   });
});

Edit:
I just realized this is really just setting the max width to the width I designated in my css file, what I need is the width in pixels – jas

Try this,

$(function () {
   var a = $('.myTextAreaCssClass');
   a.css ('max-width', function () {
      return $(this).width(); //returns computed width
   });
});

Note: there are different version of width() function so use accordingly. See: https://stackoverflow.com/a/10018686/297641