Question

我正在学习JQuery，而且我遇到了一个我似乎无法解决的问题......

我有一个XML文档，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<food>
    <group name="Red">
        <item name="Apple" type="Fruit">
        <item name="Onion" type="Veggie">
    </group>
    <group name="Yellow">
        <item name="Banana" type="Fruit">
        <item name="Pineapple" type="Fruit">
    </group>
    <group name="Orange">
        <item name="Carrot" type="Veggie">
        <item name="Orange" type="Fruit">
    </group>
</food>

现在我正在使用它：

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "xml/food.xml",
        dataType: "xml",
        success: foodXML
    }); // close ajax
});

function foodXML(xml) {

    $(xml).find('item').each(function() {
        $('#foodItem').append('<li>' + $(this).attr("name") + '</li>');
    });

}

得到这个：

Apple
Onion
Banana
Pineapple
Carrot
Orange

但是我想让它做的就是这样列出：

A
Apple
Onion
B
Banana
Pineapple
C
Carrot
Orange

有任何帮助吗？我似乎无法理解这一点。

Answer 1

看看小组，然后迭代它的孩子们。例如，

function foodXML(xml) { 

    var $fooditem = $('#foodItem');

    $('group', xml).each(function() {
          var $items = $('item', this);
          if( $items.length ){
              $fooditem.append('<li>' + $items.first().attr("name").charAt(0) + '</li>');
              $items.each(function(){
                   $fooditem.append('<li>' + $(this).attr("name") + '</li>');
              });
          }
    });

}

Answer 2

您可以使用$ .each函数迭代每个组，然后在每个组中找到该项。

function foodXML(xml) {

  $.each($(xml).find('group'), function(index, group){

        $('#foodItem').append('<li>' + index + '</li>');

        $(group).find('item').each(function() {
        $('#foodItem').append('<li>' + $(this).attr("name") + '</li>');
    });
  })

}

使用JQuery在组中解析XML

2 个答案: