使用 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 答案的基础上，但它也会检查子项。这样它将建立给定元素的分层视图。该方法不会生成封闭的

标记，因此它只能附加到现有标记。

Answer 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 文档。

Answer 3

示例

$('<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');