使用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，但它也檢查孩子。這樣它將建立給定元素的分層視圖。該方法不會生成封閉的<ol/>標籤，以便它可以附加到現有的標籤上。

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>'); 
    }); 
}); 

這工作假設你有一個正確格式的HTML文檔用身體標籤。

Answer 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');