0

私は xml ファイルを持っていて、リストから第 2 レベルの要素だけを読みたいと思っていました。たとえば、次のような車両のみのリストが必要です

車両番号：「180」、種別：「BUS」 車両番号：「190」、種別：「BUS」 ………………

これは私のxml形式です

<departures> 
 <station> 
  <vehicle> 
   <number>180</number> 
   <type>BUS</type> 
 </vehicle> 
 <vehicle> 
   <number>190</number> 
   <type>BUS</type> 
 </vehicle> 
 </station> 
 <station>  
 <vehicle> 
  <number>290</number> 
  <type>BUS</type> 
 </vehicle> 
 <vehicle> 
   <number>380</number> 
   <type>BUS</type> 
  </vehicle> 
 </station> 
<departures>

これはJavaScriptの部分です

$(document).ready(function(){
            $.ajax({
                type: "GET",
                url: XML_PATH,
                dataType: "xml",
                success: function(xml) {
                $("#update-target").empty();
                $(xml).find("station").each(function () {
                      $("#update-target").append('<ul>');                        
                        $(this).find("vehicle").each(function () {
                         var number = $(this).find('number').text();
                         var type = $(this).find('type').text();
                            $("#update-target ul").append('<li>' + type + number + '</li>');
                        });
                    });
                    },  
        });
    });

上記のコードを実行しても、出力が得られません。これを行う正しい方法は何ですか。ありがとう

4

1 に答える 1

0

質問のコードは、常に現在のリスト項目を の<ul>下のすべての要素に追加します。これが一致#update-targetするためです。#update-target ul

それは、出力がまったく得られない理由を説明していませんが、コメントは、この問題の解決策も必要であることを示しています。

簡単な答えは、:last<ul>セレクターを使用して、リスト項目を最後の要素にのみ追加することです。

$("#update-target ul:last").append("<li>" + type + number + "</li>");

もう少し詳しく説明するために、別のパラダイムを使用することもできます。受け取った XML マークアップから DOM 要素を構築したい、つまり、一部のデータ (XML マークアップ) を他のデータ (DOM 要素) に射影したいということです。この状況では、 each()の代わりにmap()を使用して、データを反復処理する代わりにデータを投影できます。これは、関数型プログラミングに近いです。

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function(xml) {
            $("#update-target").empty()
                               .append($(xml).find("station").map(function() {
                return $("<ul>").append($(this).find("vehicle").map(function() {
                    var $this = $(this);
                    return $("<li>").text($this.find("type").text()
                        + $this.find("number").text());
                }));
            }));
        }
    });
});

<ul>この方法では、現在の要素が現在のコンテキストの一部になるため、そもそも現在の要素を一致させる必要はありません。

于 2012-07-13T19:24:52.030 に答える