1

我正在使用 jquery 解析 xml。我附上了一张图片，显示了我想要解析的那种 xml。如您所见，它有几个标签，但我需要按照图像中出现的顺序解析以下内容。

ROUTE
   LENGTH time dist
   WALK  time dist
   LINE  code
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
   LINE code
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
   WALK time dist

注意：可能有 1、2 或多于 2 个 LINES 标签。

我当前的代码确实显示了数据，但只有一个，即第一行，并且只有该行内的第一个 STOP。那么如何解析这个 xml 以便可以在 XML 中显示它呢？

这是我的代码

 parseXMLForRoute = function (xmlObject) {
    var xmlObj = $(xmlObject).find('ROUTE');

    xmlObj.each(function () {
        var el          = $(this),
            startTime   = el.find('WALK').find('LENGTH').attr('time'),
            distance    = el.find('WALK').find('LENGTH').attr('dist'),
            routeTime   = el.find('LENGTH').attr('time'),
            routeDist   = el.find('LENGTH').attr('dist'),
            busNumber   = el.find('LINE').attr('code').slice(1, 4),
            busStops    = el.find('LINE').find('STOP').find('NAME').attr('val');

        container.append(createDOMElement('h4', '', '', 'Departure'))
                 .append(createDOMElement('p', '', '', from))
                 .append(createDOMElement('p', '', '', "Route Time: " + routeTime))
                 .append(createDOMElement('p', '', '', "Route Dist: " + routeDist))
                 .append(createDOMElement('section', '', '', 'WALK PIC'))
                 .append(createDOMElement('p', '', '', "Walk Time: " + startTime))
                 .append(createDOMElement('p', '', '', "Walk Dist: " + distance))
                 .append(createDOMElement('p', '', '', 'BUS PIC'))
                 .append(createDOMElement('p', '', '', "Bus Number: " + parseLineNumbers(xmlObj)))
                 .append(createDOMElement('p', '', '', "Bus Stops: " + busStops));

        //console.log($(this).find('WALK'));
    });
    console.log($(xmlObject));
},

parseLineNumbers = function (xmlObject) {
    console.log('len: ' + $(xmlObject).find('LINE').length);
    $(xmlObject).find('LINE').each(function () {
        console.log($(this).attr('code').slice(1, 4));
    });
    //console.log($(xmlObject).find('LINE').attr('code').slice(1, 4));
},

createDOMElement = function (tagName, classs, id, data) {
    return '<' + tagName + ' class="' + classs + '" id="' + id + '">' + data + '</' + tagName + '>';
}

这是xml

在此处输入图像描述

更新

我想要输出类似于下面的内容

Starting street address
WALK this amount of distance(e.g. 1 meter) for some time(e.g. 1 min)
STOP name // after walking then user reached to this stop
code // code attribute inside LINE tag which is a bus number
then display the name and times of all stops in this LINE
code // code attribute inside SECOND LINE
then display all the stops name and times in this second LINE
then walk for some distance(e.g. 1 meter) and some time(e.g. 1 min)
Destination address
4

1 回答 1

1

您需要遍历公交线路和公交车站内的每条公交线路。我希望这会引导您朝着正确的方向前进。

parseXMLForRoute = function (xmlObject) {    
    var route = $(xmlObject).find('ROUTE');
    route.each(function() {
        var el = $(this);
        var startTime = el.find('WALK').find('LENGTH').attr('time');
        var distance = el.find('WALK').find('LENGTH').attr('dist');
        var routeTime = el.find('LENGTH').attr('time');
        var routeDist = el.find('LENGTH').attr('dist');
        var lines = el.find('LINE');

        container.append(createDOMElement('h4', '', '', 'Departure'))
            .append(createDOMElement('p', '', '', from))
            .append(createDOMElement('p', '', '', "Route Time: " + routeTime))
            .append(createDOMElement('p', '', '', "Route Dist: " + routeDist))
            .append(createDOMElement('section', '', '', 'WALK PIC'))
            .append(createDOMElement('p', '', '', "Walk Time: " + startTime))
            .append(createDOMElement('p', '', '', "Walk Dist: " + distance))

        // now iterate over every bus line
        lines.each(function() {
           var el = $(this);
           var busCode = el.attr('code').slice(1,4);
           container.append(createDOMElement('p', '', '', 'BUS PIC'))
               .append(createDOMElement('p', '', '', 'Bus Number: ' + busCode));
           var stops = el.find('STOP');
           var stops_list = []; // this will hold bus stop names

           // now iterate over every bus stop 
            stops.each(function() {
               var el = $(this).find('NAME'); 
               stops_list.push(el.attr('val'));
            });
            container.append(createDOMElement('p', '', '', 'Bus Stops: ' + stops_list.join(',')));
        });
    });​
}

注意：如果.find()匹配多个元素，则返回一组匹配的元素。例如el.find('WALK')在上面的例子中实际上包含两个元素：

el.find('WALK')[0].find('LENGTH').attr('time') == 3.540
el.find('WALK')[1].find('LENGTH').attr('time') == 1.743

如果您不指定索引，您将处理第一个元素

el.find('WALK').find('LENGTH').attr('time') == 3.540
于 2012-11-13T14:21:31.143 回答