jQuery: How to reset all element positions on page?

Question

Hey everyone.

Let's say I have a bunch of DIVs with a class of "apple", and another bunch of DIVs with a class of "orange".

All these DIVs have various positions, but I want to use a jQuery function to assign them new positions relative to their parent containers live on the page without any reloading.

So, for example, how do I set all DIVs with the class of "apple" to a "top" value of "200px" relative to the parent container without reloading the page?

Thanks!

Answer 1

var $apples = $('.apple'); // caching your elements

$apples.parent().css('position', 'relative'); // setting the parent to a relative position

$apples.css('position', 'absolute')  // setting an absolute position, relative to the parent
       .css('top', '200px');  // setting the top position