javascript - 使用 jQuery/Javascript 创建集合中所有元素的列表

Question

我想使用 Javascript 循环遍历一组元素，并为每个元素创建一个标签列表，所以如果这组元素如下:

<h1>Title</h1>
<h2>Subheading</h2>
<p>Paragraph of text...</p>

它会给我以下内容:

<ol>
  <li>h1</li>
  <li>h2</li>
  <li>p</p>
<ol>

jQuery/Javascript 是否可以将元素的类型作为字符串返回，如果可以，我该如何处理？

Answer 1

这远不是我做过的最干净的代码，但它有效:

function generateList(rootElement) {
    var rootElementItem = $("<li>" + rootElement.get(0).tagName + "</li>");

    if (rootElement.children().size() > 0) {
        var list = $("<ol />");
        rootElement.children().each(function() {
            list.append(generateList($(this)));
        });

        rootElementItem.append(list);
    }

    return rootElementItem;
}

var listOfElements = generateList($("body"));
$("body").append($("<ol/>").append(listOfElements));

演示:http://jsfiddle.net/jonathon/JvQKz/

它建立在 this.tagName 之上以前给出的答案，但它也会检查 child 。这样它将建立给定元素的层次 View 。该方法不会生成封闭的 <ol/>标记，以便它可以附加到现有标记。