Question

我正在尝试迭代JSON对象数组以创建类似this的下拉列表，但使用嵌套的ul li。看来这个简单的代码不起作用。它会按预期生成ul li，但.append不起作用。我没理由。 JSFiddle

<form action="save/" method="post">
    <div class="select"></div>        
</form>

的Javascript

var jsn = [
    {
        "home": "Home",
        "solutions": {
            "education": "Education",
            "financial_services": "FinancialServices",
            "govt": "Government"
        },
        "products": {
            "PCProducts1": "PCPROducts1",
            "PCProducts2": "PCPROducts2",
            "PCProducts3": "PCPROducts3"
        }
    }
];

function iterObject(jsn, select){
    $.each(jsn, function(key, val){
        if(isplain(val)){
            ret = createOption(key, val);
            $(select).append(ret); //This code is not working
        }else{
            ret = createGroup(key);
            iterObject(val, ret)
        }
        console.log("ret", ret); // This prints expected output         
    });
}
function createOption(val, txt){
    return '<li rel="'+val+'">'+txt+'</li>';
}
createGroup = function (grpname){
    return  '<ul "class"="optiongroup"  "label"='+grpname+'></ul>';
};
function isplain(data){
    if (typeof data === 'number' || typeof data === 'string'){return true;}else{ return false;}
}
iterObject(jsn, '.select');

注意更新 - 询问查询时代码未完成。因此，查询中的代码不会显示嵌套ul和li。截至目前，它应显示ul中的所有li n .select。

Answer 1

现在它正在运作：https://jsfiddle.net/2kd0p25n/

function iterObject(jsn, select){
    $.each(jsn, function(key, val){
        if(isplain(val)){
            ret = createOption(key, val);
            $(".optiongroup").last().append(ret);
        }else{
            ret = createGroup(key);
            $(select).append(ret);
            iterObject(val, '.select')
        }         
    });
}
function createOption(val, txt){
    return '<li rel="'+val+'">'+txt+'</li>';
}
createGroup = function (grpname){
    return  '<ul class="optiongroup"  "label"='+grpname+'></ul>';
};
function isplain(data){
    if (typeof data === 'number' || typeof data === 'string'){return true;}else{ return false;}
}
iterObject(jsn, '.select');

Answer 2

纠正选择器：

$('.select').append(ret);

另外，你需要变换范围＆＃39; ret＆＃39;变量如下：

function iterObject(jsn, select){
var ret; 
//Rest of the code
}

JSFiddle

Answer 3

function iterObject(jsn, select){
   $.each(jsn, function(key, val){
        if(isplain(val)){
           ret = createOption(key, val);
           $(select).append(jQuery(ret)); //This code is not working
       }
       else{
           ret = createGroup(key);
           var jQret = jQuery(ret);
           jQuery(select).append(jQret );
           iterObject(val, jQret);
       }
       console.log("ret", ret); // This prints expected output
   });
}

Answer 4

我认为这个问题很有意思，因为它与递归有关。这是我的代码

JS

var jsn = [
    {
        "home": "Home",
        "solutions": {
            "education": "Education",
            "financial_services": "FinancialServices",
            "govt": "Government"
        },
        "products": {
            "PCProducts1": "PCPROducts1",
            "PCProducts2": "PCPROducts2",
            "PCProducts3": "PCPROducts3"
        }
    }
];

var menuBuilder = (function() {

    var isLeaf= function(obj) {
        return typeof obj !=='object';
    };

    var buildItems = function(objlist) {
        var expected= '';
        var items;

        $.each(objlist, function(key, val) {      

            if(!isLeaf(val)) {
                items= buildItems(val);

                expected+= '<li>' + key;
                expected+= '<ul>' + items + '</ul>';
                expected+= '</li>';
            } else {
                expected+= '<li>' + val + '</li>';
            }
        });

        return expected;
    };    

    var read = function(json) {
        var items= buildItems(json);
        var expect= '';

        if(items==='') return expect;

        expect += '<ul>';
        expect += items;
        expect += '</ul>';

        return expect;
    };

    return {
        read: read
    };

})();


$('#container').append(menuBuilder.read(jsn[0]));

HTML

<div id="container"></div>

jQuery.append无法正常工作

4 个答案: