Поместить сгенерированные элементы в списки

Question

Я все еще довольно новичок в Stackoverflow, так что прости меня, если я делаю это неправильно. Этот вопрос относится к другому вопросу, который я задал пару недель назад, который был решен в jQuery toggle () с динамическими идентификаторами div

Я рекомендую вам проверить ссылку, которую я разместил, чтобы вы могли понять, о чем я говорю.

Итак, теперь у меня есть список сгенерированных элементов, я отключил код «кнопки» и заменил его, чтобы каждый сгенерированный элемент был «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, чтобы сделать хорошее выпадающее меню для подпунктов и тому подобного.

Я не знаю, будет ли это работать в качестве решения или нет (если оно тогда хорошо), но я боролся с кодом, необходимым для правильной работы.

Если бы кто-то мог помочь, он был бы очень признателен!

Answer 1

Хотя многословно, похоже, это то, что вам нужно:

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/