使用 javascript 创建列表答案

【问题标题】：Create List with javascript使用 javascript 创建列表
【发布时间】：2014-02-02 12:39:19
【问题描述】：

我需要一些帮助，通过使用 document.createElement("ul") 和 document.createElement("li") 在 JavaScript 的帮助下使用以下数据源创建列表。所有这些都需要使用 JavaScript 来完成，而不是使用 JQUERY。以下是代码，但是如何使用 ul 和 li 来实现它。

var dataSource = ({
            "Pen": ({
                "Cello":({}),
                "Parker":({})
                     })
                 });

function traverseObject(obj, level) {
    for (var prop in obj) {
      if(typeof obj[prop] == "object" ) {
            if(level == 0){
            listing.item(prop, level);
            }
            if(level == 1){
            listing.tree(prop, level);
            }
            console.log(prop + " - " + " level: " + level);
            traverseObject(obj[prop], level + 1);
      } 
        else {
//          output(obj[prop], level + 1);
//          console.log(obj[prop] + " - " + " level: " + level);
     }
    }
}

traverseObject(dataSource, 0);

【问题讨论】：

你现在卡在哪里了？该论坛仅允许与“特定”代码相关的问题。所以告诉我们你遇到的代码！
All this needs to be done with JavaScript, not with JQUERY. 那你为什么用JQUERY标记这个问题？
function traverseObject(obj, level) { for (var prop in obj) { if(typeof obj[prop] == "object" ) { if(level == 0){ Listing.item(道具，水平）； } if(level == 1){ Listing.tree(prop, level); } console.log(prop + " - " + " level: " + level); traverseObject(obj[prop], level + 1); } else { // 输出(obj[prop], level + 1); // console.log(obj[prop] + " - " + " level: " + level); } } } traverseObject(dataSource, 0);
您在寻找这样的东西吗？ jsfiddle.net/Ek2xS/1
是的...这是正确的 Jfiddle...谢谢...我可以添加可扩展的点击并靠近每个元素吗？？

标签： javascript html list tree

【解决方案1】：

对象上的递归树构建和排序：

小提琴：http://jsfiddle.net/Ek2xS/23/

html:

<div id="list"></div>

脚本：

var dataSource = ({
    "Pen": ({
        "Parker": ({
            "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
            "C2": ({}),
                "C1": ({})
        })
    })
}),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li, span, sorted = [],
            i = 0;

        for (var prop in obj) {
            sorted.push(prop);
        }
        sorted.sort();
        for (; i < sorted.length; i++) {
            li = document.createElement("li");
            span = document.createElement("span");
            span.innerHTML = sorted[i];
            addListener(span, "click", function (e) {
                e.stopPropagation();
                toggleList.call(this);
            });

            li.appendChild(span);
            if (typeof obj[sorted[i]] == "object" && Object.keys(obj[sorted[i]]).length) {
                li.appendChild(traverseObject(obj[sorted[i]]));
            }
            ul.appendChild(li);
        }
        return ul;
    },
    addListener = function (element, eventName, handler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, handler);
        } else {
            element['on' + eventName] = handler;
        }
    },
    toggleList = function () {
        var elem = this.nextSibling;
        if (elem && elem.nodeName == "UL") {
            if (elem.style.display == "none") elem.style.removeProperty("display");
            else elem.style.display = "none";
        }
    };

window.onload = function () {
    document.getElementById("list").appendChild(traverseObject(dataSource));
}

问候

【讨论】：