jQuery的遞歸函數結合嵌套理成一個

Question

我想用遞歸方法使用jQuery

HTML如下

<ul> 
    <li>item-1 
     <ul> 
     <li>item-1.1</li> 
     </ul> 
    </li> 
    <li>item-2 
    <ul> 
     <li>item-2.1</li> 
     <li>item-2.2 
      <ul> 
      <li>item-2.2.1</li> 
      <li>item-2.2.2</li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
    <li>item-3 
     <ul> 
     <li>item-3.1</li> 
     </ul> 
    </li> 
    <li>item-4</li> 
    <li>item-5</li> 
</ul> 

決賽單節鋰如下的嵌套裏轉換成一個單節鋰

<ul> 
    <li>item-1</li> 
    <li>item-2</li> 
    <li>item-3</li> 
    <li>item-4</li> 
    <li>item-5</li> 
    <li>item-1.1</li> 
    <li>item-2.1</li> 
    <li>item-2.2</li> 
    <li>item-3.1</li> 
    <li>item-2.2.1</li> 
    <li>item-2.2.2</li> 
</ul> 

基本上遍歷每個級別然後追加到列表的末尾。 任何想法，我可以如何實現這一目標？所以它可以處理任何級別的列表項目。

感謝高級。

Answer 1

這裏是一個遞歸方法，會給你要找的輸出：

function recurseFetchListItems($ul) 
{ 
    var $li = $ul.remove().children("li").remove(); 
    if ($li.length) { 
     $li = $li.add(recurseFetchListItems($li.children("ul"))); 
    } 
    return $li; 
} 

它使用add()積累不同級別的列表項，同時去除文檔每個級別。它還使用children()而不是find()來處理每個呼叫的單個深度級別。

從那裏，你只需要從第一<ul>元素開始，加上累積組的列表項回到文檔，將它們包裝在一個新的<ul>元素：

$(document).ready(function() { 
    recurseFetchListItems($("ul:first")).appendTo("body").wrapAll("<ul>"); 
}); 

你可以看到結果爲this fiddle。

---

---

原件（誤導）回答如下：

你並不真的需要一個遞歸函數來做到這一點，因爲整個DOM元素樹可以用一個選擇匹配。例如，$("li")匹配所有列表項，無論其深度如何。

那麼，要實現你想要什麼，我們只需要匹配所有<li>元素，從文檔<ul>元素刪除他們的父母，然後使用wrapAll()包列表項目進入一個新的<ul>元素，並添加元素回：

$(document).ready(function() { 
    $("li").parent().remove().end().appendTo("body").wrapAll("<ul>"); 
}); 

您可以在this fiddle中查看結果。