jQuery Wrap Elemente erstellt von .Jede Methode in einem Div

Question

Ich möchte Elemente, die von einer .Each-Methode in einem Div erstellt werden.

Hier ist mein 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> 

Die Grundidee ist es, eine Überschrift für jedes Jahr zu erstellen und unterhalb dieser Liste die Ereignisse für jedes Jahr, von denen es eine unterschiedliche Anzahl sein. Ich möchte die Ereignisse in einem Div umbrechen, nachdem sie aus der XML-Datei analysiert wurden. Wie mache ich das?

Answer 1

meine aktuelle Skript hier:

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

Hier ist die HTML-Ausgabe, die es produziert:

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

Grundsätzlich Ich versuche, diese XML-Datei zu analysieren:

<?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> 

Mein Ziel In der XML-Datei wird für jedes Jahr eine mit einem Unterpunkt für jede Liste von Ereignissen korrespondierende mit erstellt dieses Jahr und ein für jedes Ereignis auf dieser Liste.