嵌套在XML循環使用jQuery

Question

我想要得到的XML文件（的test.xml）

<?xml version="1.0" encoding="UTF-8"?> 
<root> 
    <rootElement title="Requirement"> 
     <infotext>Info goes here</infotext> 
     <links> 
      <link linkurl="www.atkinsglobal.com">Atkins Global</link> 
      <link linkurl="www.google.com">Google</link> 
     </links> 
    </rootElement> 
    <rootElement title="Inception"> 
     <infotext>Info goes here</infotext> 
     <links> 
      <link linkurl="www.inceptone.com">Incept1</link> 
      <link linkurl="www.incepttwo.com">Incept2</link> 
     </links> 
    </rootElement> 
</root> 

用簡單的jQuery $不用彷徨方法的內容。 我的jQuery函數如下：

$(function() { 
    $.get('js/test.xml', function(data) { 

    $(data).find('rootElement').each(function() { 
     var $rootElement = $(this); 
     var $title = $rootElement.attr("title"); 
     var $infotext = $rootElement.find('infotext').text(); 

     $rootElement.children().each(function() { 
      var $link = $(this).find('link').text(); 
      var $linkurl = $(this).find('link').attr("linkurl"); 

      var subhtml = '<div class="link">' + $link + ': ' + $linkurl + '</div>'; 

      $('.links').append($(subhtml)); 
     }); 

     var html = '<div class="title">Title: ' + $title + '</div>'; 
     html += '<div class="subtitle">Infotext: ' + $infotext + '</div>'; 
     html += '<div class="links"></div>'; 

     $('#xmlContent').append($(html)); 
    }); 
    }); 
}); 

這表明，除了在XML文件中的鏈接位正確的數據。它是一個循環內的循環，我在那裏做錯了什麼。 HTML簡直就是<div id="xmlContent"<h1>Root Elements</h1></div>。

Answer 1

嘗試

$(function() { 
    $.get('js/test.xml', function(data) { 

     $(data).find('rootElement').each(function() { 
      var $rootElement = $(this); 
      var $title = $rootElement.attr("title"); 
      var $infotext = $rootElement.find('infotext').text(); 


      var html = '<div class="title">Title: ' + $title + '</div>'; 
      html += '<div class="subtitle">Infotext: ' + $infotext + '</div>'; 
      html += '<div class="links"></div>'; 

      var $html = $(html), $links = $html.filter('.links'); 

      $rootElement.find('> links > link').each(function() { 
       var $link = $(this).text(); 
       var $linkurl = $(this).attr("linkurl"); 

       var subhtml = '<div class="link">' + $link + ': ' + $linkurl + '</div>'; 

       $links.append($(subhtml)); 
      }); 

      $('#xmlContent').append($html); 
     }); 
    }); 
}); 

演示：Fiddle