Éléments d'enveloppe jQuery créés par la méthode .Each dans une div

Question

Je souhaite placer des éléments créés à partir d'une méthode .each dans un div.

Voici mon code:

<script type="text/javascript"> 

$(document).ready(function(){ 
    $.ajax({ 
     type: "GET", 
     url: "xml/timeline.xml", 
     dataType: "xml", 
     success: parseXML 
    }); 

    function parseXML(xml){ 

     $(xml).find("Year").each(function(){ 
      var year = $(this).attr("year"); 
    $(".timeLineWrapper").append('<h2 class="timeYearHead">' + year + "</h2>"); 
    $(this).find("Event").each(function(){ 
    var event = $(this).text();  
       $(".timeLineWrapper").append('<p>' + event + '</p>'); 
      }); // close find Event 
     }); // close find Year 
    } // close parseXML 
}); // Close docDotReady 

</script> 

L'idée de base est de créer un titre pour chaque année et au-dessous la liste des événements pour chaque année, dont il y aura un nombre variable. Je veux envelopper les événements dans un div après qu'ils ont été analysés à partir du fichier XML. Comment je fais ça?

Answer 1

Voici mon script actuel:

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "xml/timeline.xml", 
      dataType: "xml", 
      success: parseXML 
     }); 

     function parseXML(xml){ 

      $(xml).find("Year").each(function(){ 
       var year = $(this).attr("year");    
       $(".timeLine").append('&lt;li class="timeYear"&gt;&lt;h2 class="timeYearHead"&gt;' + year + "&lt;/h2&gt;&lt;/li&gt;"); 
       $(this).find("Event").each(function(){ 
        var event = $(this).text();    
        $(".timeLine").append('&lt;li class="timeEvent"&gt;' + event + '&lt;/li&gt;'); 
       }); // close find Event 
      }); // close find Year 
     } // close parseXML 
    }); // Close docDotReady 

    </script> 

est ici la sortie HTML, il produit:

<ul class="timeLine"> 
    <li class="timeYear"> 
     <h2 class="timeYearHead">1950</h2> 
    </li> 
    <li class="timeEvent"> 
     One 
    </li> 
    <li class="timeEvent"> 
     Two 
    </li> 
    <li class="timeEvent"> 
     Three 
    </li> 
    <li class="timeEvent"> 
     Four 
    </li> 
    <li class="timeYear"> 
     <h2 class="timeYearHead">1951</h2> 
    </li> 
    <li class="timeEvent"> 
     Five 
    </li> 
    <li class="timeEvent"> 
     Six 
    </li> 
    <li class="timeEvent"> 
     Seven 
    </li> 
    <li class="timeYear"> 
     <h2 class="timeYearHead">1952</h2> 
    </li> 
    <li class="timeEvent"> 
     Eight 
    </li> 
    <li class="timeEvent"> 
     Nine 
    </li> 
    <li class="timeEvent"> 
     Ten 
    </li> 
    <li class="timeEvent"> 
     Eleven 
    </li> 
    <li class="timeEvent"> 
     Twelve 
    </li> 
</ul> 

Fondamentalement, je suis en train d'analyser ce fichier XML:

<?xml version="1.0"?> 
<Years> 
    <Year year="1950"> 
     <Events> 
      <Event> 
       One 
      </Event> 
      <Event> 
       Two 
      </Event> 
      <Event> 
       Three 
      </Event> 
      <Event> 
       Four 
      </Event> 
     </Events> 
    </Year> 
    <Year year="1951"> 
     <Events> 
      <Event> 
       Five 
      </Event> 
      <Event> 
       Six 
      </Event> 
      <Event> 
       Seven 
      </Event> 
     </Events> 
    </Year> 
    <Year year="1952"> 
     <Events> 
      <Event> 
       Eight 
      </Event> 
      <Event> 
       Nine 
      </Event> 
      <Event> 
       Ten 
      </Event> 
      <Event> 
       Eleven 
      </Event> 
      <Event> 
       Twelve 
      </Event> 
     </Events> 
    </Year> 
</Years> 

Mon but est de créer un avec un pour chaque année dans le fichier XML avec une sous-liste pour chaque liste d'événements correspondant à cette année et un pour chaque événement sur cette liste.