使用 jQuery 在 XML 中嵌套循环答案

【问题标题】：Nested looping in XML with jQuery使用 jQuery 在 XML 中嵌套循环
【发布时间】：2013-07-30 11:38:49
【问题描述】：

我要获取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 $.get 方法。我的 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>。

【问题讨论】：

标签： javascript jquery xml

【解决方案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

【讨论】：