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

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

Title
 
Subheading
 
Paragraph of text... 

它会给我以下内容：

 
 
h1
 
h2
 
p
 
 

是否有可能jQuery / Javascript将元素的类型作为字符串返回，如果是这样，我将如何处理它？

Answer 1

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

 function generateList(rootElement) { var rootElementItem = $("
" + rootElement.get(0).tagName + "
"); if (rootElement.children().size() > 0) { var list = $("
"); rootElement.children().each(function() { list.append(generateList($(this))); }); rootElementItem.append(list); } return rootElementItem; } var listOfElements = generateList($("body")); $("body").append($("
").append(listOfElements)); 

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

它建立在之前给出的this.tagName答案的基础上，但它也检查了孩子。 这样它将构建给定元素的分层视图。 该方法不会生成封闭的

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

Answer 2

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

-html-

 
Title
 
Subheading
 
Paragraph of text... 

-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('
'); } // output the name of the tag (list item) $('ol').append('
' + this.tagName.toLowerCase() + '
'); }); }); 

假设您有一个带有body标签的正确格式的HTML文档，这可以正常工作。

Answer 3

例

 $('
').append(function(index, html){ var ret = $(''); $('body>*').each(function(i, el) { ret.append( $('
').html(this.tagName.toLowerCase()) ); }); return ret.html(); }).appendTo('body');