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

【问题标题】：Use jQuery/Javascript to create a list of all elements in a set使用 jQuery/Javascript 创建集合中所有元素的列表
【发布时间】：2011-05-21 16:27:58
【问题描述】：

我想用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 是否可以将元素的类型作为字符串返回，如果可以，我将如何处理？

【问题讨论】：

可能重复stackoverflow.com/questions/341900/…

标签： javascript jquery dom label element

【解决方案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 答案的基础上，但它也会检查孩子。这样，它将建立给定元素的分层视图。该方法不会生成封闭的<ol/> 标记，因此它只能附加到现有标记。

【讨论】：

【解决方案2】：

我希望这个简单的解决方案会有所帮助： http://jsfiddle.net/neopreneur/n7xJC/

-html-

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

-js-

$(function(){
    $('body *').each(function(){
        // append a 'ol' to body in order to output all tag names
        if(!$(this).parents('body').find('ol').length){
            $('body').append('<ol/>');  
        }

        // output the name of the tag (list item)
        $('ol').append('<li>' + this.tagName.toLowerCase() + '</li>');
    });
});

假设您有一个格式正确且带有 body 标记的 HTML 文档，则此方法有效。

【讨论】：

【解决方案3】：

example

$('<ol />').append(function(index, html){

    var ret = $('<span />');
    $('body>*').each(function(i, el) {
        ret.append( $('<li />').html(this.tagName.toLowerCase()) );
    });

    return ret.html();

}).appendTo('body');

【讨论】：