Вложенный список в плоский список с глубины с помощью JQuery

Question

Я пытаюсь перевести вложенный список как

<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

к

<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> 

Можете ли вы мне помочь? И этот порядок всегда один и тот же (сверху вниз)?

Answer 1

Как насчет 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);