Q:

Nested list to Flat list with depth using jquery

I'm trying to translate a nested list like
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
     <li>Black tea</li>
     <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

to 
<div>
  <div class="list-depth-1">Coffee</div>
  <div class="list-depth-1">Tea</div>  
  <div class="list-depth-2">Black tea</div>
  <div class="list-depth-2">Green tea</div>  
  <div class="list-depth-1">Milk</div>  
</div>

Can you help me? And is this order always the same (from top to bottom)?

A:

How about this?
var parent = $("<div></div>");

$('#top li').each(function(pos,elem){
    var child = $("<div></div>").addClass("list-depth-" + $(elem).parents('ul').length).text(elem.childNodes[0].nodeValue);
    parent.append(child);
});

$('body').append(parent);

