jQuery: How to move all CSS styles from one element and apply them to a different element?

Question

I have an external stylesheet that is applying styles to my TD elements. I would like to move those styles to the DIV tags (content wrappers) that are within the TD tags.

The CSS:

td { padding: 5px }
div { }

The HTML:

<td>
    <div>
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

The JavaScript:

$(document).ready(function(){
    $('tr').children('td').each(function(){
        //move the td styles to div
    });
});

How can I achieve this?

Answer 1

EDIT: Code corrected

$('div').attr('style', $('td').attr('style'));

If you want to move just add this line afterwards

$('td').attr('style', '');

I realize that this looks contrived but I have no other selectors to work with here. Normally you'd want to do this with an id or a class instead of the actual attribute.

Answer 2

EDIT: This answer was written before the question was clarified.

Give your elements IDs, like this:

<td id="td_element" style="padding:5px">
    <div id="div_element">
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

And use

var td_element = $('#td_element')
$('#div_element').attr('style', td_element.attr('style'));
td_element.removeAttr('style');

Of course you could use a class instead - or you may have the elements from previous javascript code. You'll need to decide the best way to reference the elements yourself.

Answer 3

And a more generalized solution from the provided answers..

HTML

<td style="padding:5px">
    <div class="inherit">
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

JS

$('.inherit')
     .attr('style', $(this)
                    .parents('td')
                    .attr('style')
          )
     .parents('td')
     .removeAttr('style');

Answer 4

Don't move the styles is my short answer - find another way. Can you load another stylesheet after the stylesheet being loaded? If so, add a stylesheet that overrides the td and div padding defined in the stylesheet you're having to reference.