Verwenden Sie jQuery/Javascript, um eine Liste aller Elemente in einem Set zu erstellen

Question

Ich möchte Javascript verwenden, um eine Reihe von Elementen durchlaufen, und erstellen Sie eine Liste von Beschriftungen für jedes, also wenn die Menge der Elemente wie folgt waren:

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

es würde mir folgendes:

<ol> 
    <li>h1</li> 
    <li>h2</li> 
    <li>p</p> 
<ol> 

Ist es möglich, jQuery/Javascript eines Elements Typ als String zurück, und wenn ja, wie würde ich vorgehen?

Answer 1

Diese weit vom saubersten Stück Code, das ich je gemacht habe, aber es funktioniert:

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

Demo: http://jsfiddle.net/jonathon/JvQKz/

es auf die this.tagName Antwort erstellt, die zuvor gegeben wurde, aber es überprüft auch für Kinder. Auf diese Weise wird eine hierarchische Ansicht des angegebenen Elements erstellt. Die Methode generiert das umschließende <ol/>-Tag nicht, sodass es einfach an ein vorhandenes angehängt werden kann.

Answer 2

Ich hoffe, diese einfache Lösung hilft: 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>'); 
    }); 
}); 

Dies funktioniert ein Dokument richtig gebildet HTML mit einem Körper unter der Annahme, Etikett.

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