在 jQuery 中解析 XML

Question

我今天早些时候发帖 (Old Question) 寻求帮助以解析 XML。我当时并没有意识到该解决方案并没有完全解决我的问题。

我的问题是，虽然我可以通过查找单个元素来解析 XML，但我需要记下每个项目所在的级别。每个 XML 文档的项目和类别的数量各不相同，但结构都相同。

<?xml version="1.0"?>
<config>
<game>
    <title>Dementia</title>
        <cat>
            <catTitle>Mild</catTitle>
            <item>mild-1</item>
            <item>mild-2</item>
            <item>mild-3</item>
        </cat>
        <cat>
            <catTitle>Moderate</catTitle>
            <item>Moderate-1</item>
            <item>Moderate-2</item>
            <item>Moderate-3</item>
        </cat>
        <cat>
            <catTitle>Severe</catTitle>
            <item>Severe-1</item>
            <item>Severe-2</item>
        </cat>
</game>

例如，当使用 'find("item")' 时，我需要它还记下它在 (0,1,2,3,4 等) 下的哪个位置。 catTitle 也需要这样做。

然后我想将此数字分配为属性。这将允许我轻松比较该项目是否与其类别匹配，基于 .

目前我有以下：

    //XML Array
///////////////////////////////////////
function loadXML(){
  $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: parseXMLtoArray
        }); 
}

function parseXMLtoArray(xml){

$(xml).find("cat").each(function(idx, v) {
    categoryArrays[idx] = [];

    $(v).find("item").each(function( i , vi) {
        categoryArrays[idx].push( $(vi).text() );
    });             
});
console.log(categoryArrays);
}
///////////////////////////////////////

为了更好地理解这样做的目的，我附上了截图：

用户将“项目”拖到底部的正确类别，然后根据它是否正确，它是可放置的。

任何帮助将不胜感激！

Answer 1

我想通了。我将 XML 解析为数组并为每个项目创建了一个对象，添加了其类别的属性 (.attr)，以便以后可以调用它。

//XML Array
///////////////////////////////////////
function loadXML(){
  $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: parseXMLtoArray
        }); 
}


function parseXMLtoArray(xml){

$(xml).find("cat").each(function(idx, v) {
    categoryArrays[idx] = [];

    $(v).find("catTitle").each(function(){

        //$(xml).find('title:contains("Dimentia")').each(function(){
        numberofCategories = numberofCategories+1;
        tmpCategory = $(this).text();
        categoryNames.push(tmpCategory);

        var $item = $('<div>' + tmpCategory + '</div>').fadeIn('slow').appendTo('#catPile').attr('categoryName', tmpCategory).attr('categoryNum', idx).droppable({
            containment: '#content',
            stack: '#catPile div',
            cursor: 'move',
            drop: handleDropEvent
        });

    });



    //ITEM PARSING
        $(v).find("item").each(function( i , vi) {
            categoryArrays[idx].push( $(vi).text() );

            numberofItems = numberofItems+1;
            tmpItem = $(this).text();

            //Add Item to Array
            itemNames.push(tmpItem);

                   //UI CREATION and Atrribute setting
                    var $item = $('<div>' + tmpItem + '</div>').fadeIn('slow').appendTo('#itemPile').attr('itemName', tmpItem).attr('categoryNum', categoryArrayNum).draggable({
                        containment: '#content',
                        stack: '#itemPile div',
                        cursor: 'move',
                        revert: true
                    });

                    console.log("Item Created: " + tmpItem + " // Item's Category:" + categoryArrayNum) ;

        });


    console.log('-- Category Array Num: ' + categoryArrayNum + ' contains: ' + categoryArrays[categoryArrayNum]);
    categoryArrayNum++;
});

console.log("// ITEMS ASSIGNED TO CATEGORIES");
}

希望这对某人有所帮助！