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 $ .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>。

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

使用jQuery在XML中嵌套循环

1 个答案: