由div中的.Each方法创建的jQuery Wrap元素

Question

我想在.each中包装从div方法创建的元素。

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

基本的想法是为每年创建一个标题，并在该列表下面列出每年的事件，其中将有不同的数字。我想在从XML文件解析后将事件包装在div中。我怎么做？

Answer 1

这是我当前的脚本：

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

这是它产生的HTML输出：

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

基本上，我试图解析这个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>

我的目标是在XML文件中为每年创建一个带有a的内容，其中包含与该年度相对应的每个事件列表的子列表以及该列表上的每个事件。