Adjust a width based on parent w/ jQuery

Question

I need to be able to adjust a width of a class based on a width of a parent. Currently .myClass has a width assigned in CSS. Would something like this work:

.myClass {
    color: #000;
    width:100px;
}

$(".myClass").width($(".myClass").parent().width());

This will be applied to a <DIV> and the parent could be a <TD> or another <DIV>.

Answer 1

What you have should work but I would probably change it to this:

$(".myClass").css("width",$(".myClass").parent().css("width"));

You might be able to use this instead of the second $(".myClass"), but you'd have to test that.

Keep in mind that it's not changing the class itself. It's changing the width of any element that uses that class.

UPDATE:

If you are going to be doing any sort of calculations with the parent width then you should probably stick with your original method. I like css when you are applying styles "as is" but that is a personal preference. If you are doing any kind of modifications to the parent value then width is probably better.

From the width documentation:

The .width() method is recommended when an element's width needs to be used in a mathematical calculation.

Answer 2

var parentW = $('.myClass').parent().width();
$('.myClass').width(parentW);

DEMO1

$('.myClass').width( $('.myClass').parent().width() );

DEMO2

And if you have more classes 'myClass':

$('.myClass').each(function() {
    var myClass = $(this);
    var parentW = myClass.parent().width();
    myClass.width(parentW);
});

DEMO3

AND HERE IS ONE HARD CODED: (no javascript);)

DEMO4

And if you followed this song, here is the 'refrain': (the smart solution):

$('.myClass').css({width: 'auto'});

DEMO5