Javascript 基于页面元素动态构建菜单结构

我在基于页面元素创建动态菜单时遇到一些问题。如何从中创建菜单

<div class="parent">
    <div class="one child" id="first"></div>
</div>
<div class="parent">
      <div class="one child" id="second"></div>
</div>
<div class="parent">
      <div class="one child" id="third"></div>
</div>
<div class="parent">
      <div class="one child" id="fourth"></div>
      <div class="one child" id="fifth"></div>
      <div class="one child" id="sixth"></div>
      <div class="one child" id="seventh"></div>
</div>
<div class="parent">
      <div class="one child" id="eight"></div>
</div>

为此，我希望jquery构建如下菜单结构：

<ul class="navigation">
      <li><a href="#first"></a></li>
      <li><a href="#second"></a></li>
      <li><a href="#third"></a></li>
      <li>
            <ul class="sub-navigation">
                  <li><a href="#fourth"></a></li>
                  <li><a href="#fifth"></a></li>
                  <li><a href="#sixth"></a></li>
                  <li><a href="#seventh"></a></li>
            </ul>
      </li>
      <li><a href="#eight"></a></li>
</ul>

这是我一直在试图让它工作的小提琴：

在路上的某个地方，我失去了我的焦点，我无法完成这个小涂鸦

var $parents = $('.parent'),
    $ul = $('<ul>'),
    $li = $('<li>'),
    $a = $('<a>'),
    $nav = $('<nav>'),
    $navul = $ul.clone().attr('class', 'navigation');

$nav.append($navul);

$parents.each(function ea(){
    var $parent = $(this),
        $children = $parent.children('.one.child'),
        $anchor = $a.clone(),
        $subul,
        id;

    if ($children.length == 1) {
        id = $children.attr('id');

        $anchor
            .attr('href', '#' + id)
            .text($children.attr('id'));

        $navul.append($li.clone().append($anchor));
    } else if ($children.length > 1) {
        $subul = $ul.clone().attr('class', 'sub-navigation');

        $children.each(function ea(){
            var $child = $(this),
                $anchor = $a.clone(),
                id = $child.attr('id');

            $anchor
                .attr('href', '#' + id)
                .text($child.attr('id'));

            $subul.append($li.clone().append($anchor));
        });

        $navul.append($subul);
    }
});

$parents.filter(':eq(0)').before($nav);

---

我有一些时间，认为这可能对你仍然有用：

(function($){
    $.fn.createMenu = function (opts){
        var s = $.extend({
            'menuID' : 'menu',
            'navigationID' : 'navigation',
            'navigationClass' : 'navigation',
            'attachTo' : 'body'
        }, opts),
            nav = $('<nav />', {
                'id' : s.navigationID
            }),
            menu = $('<ul />', {
                'id' : s.menuID
            }),
            textProp = 'textContent' in document.body ? 'textContent' : 'innerText',
            ulWrap = document.createElement('ul'),
            liWrap = document.createElement('li'),
            aWrap = document.createElement('a'),
            liTmp,aTmp,
            // defining a function to create the li-wrapped links:
            createLinks = function (el, par, prefix) {
                // if the 'par' is a jQuery object we'll use that,
                // otherwise we assume it's a DOM node and we wrap that with jQuery:
                var parent = par instanceof jQuery ? par : $(par);
                // cloning created elements rather than re-creating elements:
                aTmp = aWrap.cloneNode();
                // creating the 'href' to link to the id:
                aTmp.href = '#' + el.id;
                aTmp[textProp] = el.id;
                liTmp = liWrap.cloneNode();
                // appending the cloned a element to the li element:
                liTmp.appendChild(aTmp);
                // adding the appropriate class to the parent 'ul' element,
                // and appending the 'li':
                parent.addClass(('undefined' === typeof prefix ? '' : prefix) + s.navigationClass).append(liTmp);
            };

        // appending the 'menu' to the 'nav':
        nav.append(menu);

        // prepending the nav to the specified element (from the options/defaults):
        nav.prependTo(s.attachTo);

        // iterating over the elements matched by the selector:
        this.each(function(i,e){
            // using this twice, so caching:
            var $e = $(e);
            // if there are no siblings:
            if ($e.siblings().length === 0) {
                // we create the links:
                createLinks(e, menu);
            }
            // if there are previous siblings we do nothing:
            else if ($e.prev().length) {
                // do nothing, this is inelegant
                // but I couldn't think of a better way
            }
            else {
                // there are siblings (this should only be matched by the first
                // sibling of a group.
                // clone a new 'li' and 'ul' element:
                var li = liWrap.cloneNode(),
                    ul = ulWrap.cloneNode(),
                // find all childNodes of the element's parent:
                    items = e.parentNode.childNodes;
                // append the cloned 'ul' to the cloned 'li':
                li.appendChild(ul);
                // iterate over the childNodes:
                for (var i = 0, len = items.length; i < len; i++) {
                    // if the node has a nodeType *and* that nodeType is exactly 1
                    // (therefore the node is an HTMLElement):
                    if (items[i].nodeType && items[i].nodeType === 1) {
                        // create links from those elements:
                        createLinks(items[i], ul, 'sub-');
                    }
                }
                // append the created 'li' (above,  before the for loop) to the menu:
                menu.append(li);
            }
        });
        // I tend to return the created elements, jQuery often, however, returns
        // the elements of the original selector (which would be 'return this'):
        return nav;
    };
})(jQuery);

$('.one').createMenu();

参考资料：

JavaScript: . . . . . . . jQuery： . . . . . . .

---

那么，您需要将所有的替换为？那么，你将如何决定哪一个应该是。。？你能想出一个更具体的问题或更好的问题陈述吗？div可能包含图像、内容和表单，所以我不想走这条路。基本上，我需要做一个结构化的导航，将100%代表该部门的等级。我不能投票，因为我是新来的，我需要15个声誉，但非常感谢它的工作。再次感谢您抽出时间帮我解答这个问题。您可以通过检查答案旁边的提纲来选择它作为答案。注意，每个问题只能检查一个答案，因为检查多个答案只会更改已接受的答案。这有一个解决问题的有趣方法：谢谢你非常欢迎，我只希望这对你有帮助。顺便问一句，请问你的问题是否解决了，或者还有什么问题吗？在这种情况下，请考虑接受一个你的问题的答案，你觉得最好的帮助解决你的问题，不一定是我的，无论你觉得最有用的。欲了解更多信息，请查看