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

Posted 2023-03-05

【中文标题】使用 jQuery/Javascript 创建集合中所有元素的列表

【英文标题】：Use jQuery/Javascript to create a list of all elements in a set

【发布时间】：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 是否可以将元素的类型作为字符串返回，如果可以，我将如何处理？

【问题讨论】：

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

【参考方案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');