Utilisez jQuery/Javascript pour créer une liste de tous les éléments d'un ensemble

Question

Je veux utiliser Javascript pour faire défiler un ensemble d'éléments et créer une liste d'étiquettes pour chacun d'entre eux, donc si l'ensemble d'éléments était le suivant:

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

il me donnerait les suivantes:

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

Est-il possible pour jQuery/Javascript pour retourner le type d'un élément sous forme de chaîne, et si oui comment pourrais-je faire cavalier?

Answer 1

Ceci est loin d'être le plus propre morceau de code que j'ai jamais fait, mais cela fonctionne:

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

Démo: http://jsfiddle.net/jonathon/JvQKz/

Il se base sur la this.tagName réponse qui a été donnée précédemment, mais vérifie également les enfants. De cette façon, il va construire une vue hiérarchique de l'élément donné. La méthode ne génère pas l'étiquette <ol/> qui l'entoure, de sorte qu'elle peut simplement être ajoutée à une étiquette existante.

Answer 2

J'espère que cette solution simple aide: 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>'); 
    }); 
}); 

Cela fonctionne en supposant que vous avez un document HTML correctement formé avec un corps marque.

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