Question

我试图通过使用递归函数循环来将列表保存到json对象中，所以这就是我到目前为止所做的： 我的列表：

<ul id="Menu">
    <li>Menu
        <ul>
            <li>Test 1</li>
            <li>Test 2
                <ul>
                    <li>Sub test 2/1</li>
                    <li>Sub test 2/2</li>
                    <li>Sub test 2/3</li>
                </ul>
            </li>
            <li>Test 3</li>
            <li>Test 4</li>     
        </ul>
    </li>
    <li>Menu2</li>
</ul>

我的剧本：

<script>
jQuery(document).ready(function(){
    item = {};
    buildMenu($('#Menu'), item);
    menu.push(item);
    console.log(JSON.stringify(menu));  
});
var menu = [];

function buildMenu(ul, item){
    var children = [];
    ul.find('li').each(function(){
        var current = $(this);
        if(current.find('ul').length > 0){
            var newItem = {};
            buildMenu(current.find('ul'), newItem);
            children.push(newItem);
        }else{
            children.push(current.text());
        }
    });

    var txt = $(this).text();
    console.log('pushing into: '+txt);
    item[txt] = children;   
}
</script>

我想将每个菜单及其中的子项保存为json对象并将其发送到php，但输出错误：

[{"MenuTest 1Test 2Sub test 2/1Sub test 2/2Sub test 2/3Test 3Test 4Menu2":[{"Test 1Test 2Sub test 2/1Sub test 2/2Sub test 2/3Test 3Test 4":["Test 1",{"Sub test 2/1Sub test 2/2Sub test 2/3":["Sub test 2/1","Sub test 2/2","Sub test 2/3"]},"Sub test 2/1","Sub test 2/2","Sub test 2/3","Test 3","Test 4"]},"Test 1",{"Sub test 2/1Sub test 2/2Sub test 2/3":["Sub test 2/1","Sub test 2/2","Sub test 2/3"]},"Sub test 2/1","Sub test 2/2","Sub test 2/3","Test 3","Test 4","Menu2"]}]

我的功能出了什么问题？

Answer 1

这就是你要找的东西吗？

var menu = [];
$(document).ready(function(){
    item = {};
    buildMenu($('#Menu'), item);
    menu.push(item);
    console.log(menu);  
});


function buildMenu(ul, item){
    var children = [];
    ul.children('li').each(function(){
        var current = $(this);
        if(current.children('ul').length > 0){
            var newItem = {};
            buildMenu(current.children('ul'), newItem);
            children.push(newItem);
        }else{
            children.push(current.text());
        }
    })

var txt = ul.parent().html();
txt = txt.replace(/\<ul.*[\s\S]*\<\/ul\>/g,"").trim();
console.log(txt);
item[txt] = children;      
}

你应该只选择直接的孩子。

小提琴：https://jsfiddle.net/nsj3gqt5/1/

Answer 2

根据我的理解，此脚本将执行您需要的操作，创建带子菜单和菜单项的菜单

$(function() {
    var menu = [];
    buildMenu($('#Menu'), menu);
    console.log(JSON.stringify(menu));  
});

function buildMenu(item, parentList) {
    var isNode = function(item) {
        return item.is('li');
    }
    var isList = function(item) {
        return item.is('ul');
    }
    var hasChildren = function(item) {
        return item.children().length > 0;
    }

    var itemSubList = [];
    if (isNode(item)) {
        if (hasChildren(item)) {
            // This is subMenu
            // console.log("subMenu " + item.justtext().trim());
            var subMenu = {};
            subMenu[item.justtext().trim()] = itemSubList;
            parentList.push(subMenu);
        } else {
            // This is menuItem
            // console.log("menuItem " + item.text()); 
            parentList.push(item.text());
            return;
        }
    } else if (isList(item)) {
        // Processing list
        // console.log("list");
        itemSubList = parentList;
    }   
    item.children().each(function() {
        var child = $(this);
        buildMenu(child, itemSubList);
    });
}

请注意，我使用justtext jquery plugin来获取没有子元素的元素文本，因此您应该包含此脚本

<!-- include justtext jquery plugin -->
<script src="http://viralpatel.net/blogs/demo/jquery/get-text-without-child-element/jquery.justtext.1.0.js"></script>

将ul列表保存到json对象中

2 个答案: