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

您问题中的代码始终会将当前列表项附加到<ul>下的所有#update-target元素，因为这是#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>元素，因为它会成为当前上下文的一部分。

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

1 个答案: