jquery: wrap image in a div and copy the float from the image to the div

I have an开发者_如何学编程 image that I need to wrap in a div:

currently doing this:

$('.photo-img').wrap('<div class="photo-wrap" />');

And then I need to take the float setting from the img and add it to the new div.

This the the HTML:

<img class="photo-img" style="margin-left: 10px; margin-right: 0px; float: right; width: 200px; height: 267px;" src="path/to/image.jpg" alt="">

and this is what I need it to be:

<div class="photo-wrap" style="float: right;">
   <img class="photo-img" style="margin-left: 10px; margin-right: 0px; float: right; width: 200px; height: 267px;" src="path/to/image.jpg" alt="">
</div>

Any help will be much apprciated.

C

var img = $('.photo-img');

img.wrap('<div class="photo-wrap" />').parent().css('float', img.css('float'));

jsFiddle.

...or alternatively...

$('.photo-img')
 .parent()
 .css('float', function() { return $(this).find('.photo-img').css('float'); })

$('.photo-img').wrap('<div class="photo-wrap" />');
var imgFloat = $('.photo-img').css('float');
$('.photo-wrap').css("float", imgFloat);

EDIT:

Writing something on a whim, not testet, but I think something like this might work:

$('.photo-img').each(function() {
     var imgFloat = $(this).css('float');
     $(this).wrap('<div class="photo-wrap" style="float:' + imgFloat + '"/>');
});