Разбор XML в группах с JQuery

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

Вы можете использовать функцию $ .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>');
    });
  })

}

Answer 2

Посмотрите на группы, затем переберите их детей. Например,

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>');
              });
          }
    });

}