Copy an element class to another

Copy an element class to another

I have following HTML structure. Here's what I'm trying to do:
Click on any .edit class in any .item in the .wrap div, and display the
.list div.
Select an item in .list div, copy the class of the <i> inside the selected
div.
Add the copied class to the <i> which is is in the same class where the
.edit link was clicked.
Problem:
When I click on the item in the .list div, I can find the selected item
class, but I am unable to figure on how to find the class in which the
edit link was clicked.
Here's HTML:
<div class="wrap">
<div class="item">
<div class="icon1"><i class="default"></i>Default</div>
<div class="edit">Change</div>
</div>
<div class="item">
<div class="icon2"><i class="default"></i>Default</div>
<div class="edit">Change</div>
</div>
</div>
<div class="list">
<ul>
<li> <i class="class1"></i>New 1</li>
<li> <i class="class2"></i>New 2</li>
</ul>
</div>
So, In the above example, when I click on the 'Change', I want to select
an item from .list and then copy the class in that item (eg. class1) and
replace that with the class .default.
Here's jQuery:
$('.edit').click(function(e){
$('.list').css({display: 'block'});
});
$('.list ul li').click(function() {
$('.list ul li').removeAttr('class');
$(this).addClass('selected');
var new_class = $(this).children('i').attr('class');
//alert(new_class);
});
Demo: http://jsfiddle.net/hfgsJ/