使用 Jquery 从 XML 文件中获取第二个元素的列表

Question

我有一个 xml 文件，我只想从列表中读取二级元素。例如，我想要一个仅包含以下车辆的列表

车辆编号：“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>');
                        });
                    });
                    },  
        });
    });

在运行上述代码时，我没有得到任何输出。请问什么是正确的方法来做到这一点。谢谢

Answer 1

您问题中的代码始终将当前列表项附加到#update-target 下的所有<ul> 元素，因为这是#update-target ul 匹配的内容。

这并不能解释为什么您根本没有得到任何输出，但您的评论表明您可能也希望找到解决此问题的方法。

一个简单的答案是使用:last 选择器仅将列表项附加到最后一个<ul> 元素：

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

要详细说明，您还可以尝试使用另一种范式。您想从收到的 XML 标记构建 DOM 元素，这意味着您想将一些数据（XML 标记）投影到其他数据（DOM 元素）中。在这种情况下，可以使用map() 代替each() 来投影数据而不是对其进行迭代，这更接近于函数式编程：

$(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> 元素，因为它已成为您当前上下文的一部分。