把生成的項目放入列表中

我對Stackoverflow還是比較新的，所以請原諒我，如果我做錯了。這個問題與我在幾周前問過的另一個問題有關，這個問題在jQuery toggle() with dynamic div ID's 把生成的項目放入列表中

解決了，我建議你檢查我發佈的鏈接，這樣你就可以知道我在說什麼了。

所以我現在有我正在生成的項目列表，我已經關閉了「按鈕」代碼並將其替換爲每個生成的項目都是「li」 - 但是，現在我的菜單中有一個項目列表，沒有命令給他們。我需要指定一些項目作爲頂級項目，並在下拉菜單中將其他項目指定爲子項目。

我在想，我也許可以調整我的班，這樣產生的按鈕後，頂層項目有一個類和子級項目有一個類，沿着線的東西：

<div class="category-1-top-level-item">Main Item</div> 
<div class="category-1-sub-item">Sub Item</div> 
<div class="category-1-sub-item">Sub Item</div> 

<div class="category-2-top-level-item">Main Item</div> 
<div class="category-2-sub-item">Sub Item</div> 
<div class="category-2-sub-item">Sub Item</div>

然後，也許jQuery的可以用來檢測頂級項目「1類」和所有子項標記爲「1類子項」，然後輸出格式正確的列表：

<ul> 
    <li>Top Level Item 
     <ul> 
      <li>Sub Item</li> 
      <li>Sub Item</li> 
     <ul> 
    </li> 
</ul>

然後，當然，該列表可以用CSS來設計，以便爲子項創建一個很好的下拉菜單等等。

我不知道這是否會作爲解決方案或不（如果它確實很好），但我一直在努力獲得正確工作所需的代碼。

如果有人可以幫忙，這將非常感激！

來源

2011-03-26 Zach Nicodemous

雖然冗長，這似乎做你以後：

var topLevel = $('<ul />'); 
var subMenus = {}; 

function getId(el){ 
    return el.attr('class').split('-')[1]; 
} 

$('div[class^="category-"][class$="-top-level-item"]').each(function(){ 
    var topLevelDiv = $(this); 
    var id = getId(topLevelDiv); 
    var subItems = $('<ul />'); 
    var li = $('<li />').text(topLevelDiv.text()) 
     .append(subItems).appendTo(topLevel); 
    subMenus[id] = subItems; 
}); 

$('div[class^="category-"][class$="-sub-item"]').each(function(){ 
    var subLevelDiv = $(this); 
    var id = getId(subLevelDiv); 
    var li = $('<li />').text(subLevelDiv.text()) 
     .appendTo(subMenus[id]); 
}); 


topLevel.appendTo('body');

工作例如：http://jsfiddle.net/kobi/UuaSA/

來源

2011-03-26 14:20:32 Kobi

把生成的項目放入列表中

回答

相關問題