Question

我仍然是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可用于检测顶级项“category-1”和任何标记为“category-1-sub-item”的子项，然后输出格式正确的列表：

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

将生成的项目放入列表中

1 个答案: