javascript - jQuery 将 xml 解析为嵌套列表

Question

我有一些来自 web 服务的 xml，我想对其进行解析并创建一个嵌套的无序列表，以便我可以使用 CSS 设置样式，使其看起来像一个 TreeView 。xml 如下所示:

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfNavMenuItem xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
        <MENU_DISPLAY_NAME>Accommodation Request</MENU_DISPLAY_NAME>
    </NavMenuItem>
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
        <MENU_DISPLAY_NAME>Additional Personal Information</MENU_DISPLAY_NAME>
    </NavMenuItem>
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
        <MENU_DISPLAY_NAME>All Actions Awaiting Your Attention</MENU_DISPLAY_NAME>
    </NavMenuItem>
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
        <SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
        <MENU_DISPLAY_NAME>Create Timecard</MENU_DISPLAY_NAME>
    </NavMenuItem>
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
        <SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
        <MENU_DISPLAY_NAME>Recent Timecards</MENU_DISPLAY_NAME>
    </NavMenuItem>
    <NavMenuItem>
        <DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
        <PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
        <SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
        <MENU_DISPLAY_NAME>Timecard Search</MENU_DISPLAY_NAME>
    </NavMenuItem>
</ArrayOfNavMenuItem>

我可怜的人对 jQuery 的尝试已经到此为止了。在遍历每个导航项并将它们添加到 <li></li> 之前，我不确定如何捕获主文件夹、二级文件夹结构。在适当的文件夹内

My fiddle is here..

//AJAX CALL
$(response).find('NavMenuItem').each(function (index) {
var test = ($(this).find('SECONDARY_FOLDER').length > 0) ? '<ul><li><label for="subfolder' + index +'">' + $(this).find("SECONDARY_FOLDER").text() + '</label><input type="checkbox" id="subfolder' + index + '">' : '';            
$('.SearchResults').append('<ul class="tree"><li><label for="folder' + index + '">' + $(this).find("PRIMARY_FOLDER").text() + '</label>'
  + '<input type="checkbox" checked id="folder' + index + '" />'
  + test
  + '<ul><li class="file"><a href="#">' + $(this).find("MENU_DISPLAY_NAME").text() + '</a></li></ul>'       
  + '</li></ul>');             
});

但我想要的 HTML 输出是这样的:

    <ul class="tree">
        <li>
          <label for="folder1">XYZ CORP HR TIME SELF SERVICE </label> 
          <input type="checkbox" checked id="folder1" />   
            <ul>
                <li><label for="subfolder1">Time</label> <input type="checkbox" id="subfolder1" />

                        <ul>
                            <li class="file"><a href="#" target="_tab">Create Timecard</a></li>
                            <li class="file"><a href="#" target="_tab">Recent Timecards</a></li>
                            <li class="file"><a href="#" target="_tab">Timecard Search</a></li>                                   
                        </ul>
                </li>
            </ul>        
        </li>

        <li>
            <label for="folder2">XYZ HR EMP SELF SERVICE</label> <input type="checkbox"  id="folder2" />                
            <ul>
                <li class="file"><a href="#" target="_tab">Accommodation Request</a></li>
                <li class="file"><a href="#" target="_tab">Additional Personal Information</a></li>
                <li class="file"><a href="#" target="_tab">All Actions Awaiting Your Attention</a></li>           
            </ul>
        </li>
    </ul>

Answer 1

检查一下:

var tree=$('<ul></ul>').addClass('tree'); // create an unordered list with the class 'tree'
$('NavMenuItem',response).each(function() { //for each item in NavMenuItem
    var primary=$('PRIMARY_FOLDER',this).text(); //get the text of the PRIMARY_FOLDER element
    var secondary=$('SECONDARY_FOLDER',this).text();
    var displayName=$('MENU_DISPLAY_NAME',this).text();
    if (!primary) return; // this shouldn't happen, but still, if no primary folder, ignore it
    //search for a direct listitem that has a direct child a label
    // that has the primary text as content (get the label, then return its parent)
    var li=$('>li>label:contains("'+primary+'"):first',tree).parent();
    if (!li.length) { // if not found, create it
        var index=$('>li',tree).length+1; // the number of list items in the tree plus 1
        var li=$('<li></li>') // create a list item
            .append($('<label for="folder'+index+'"></label>').text(primary)) //that contains a label
            .append('<input type="checkbox" checked id="folder'+index+'" />') // and an input
            .append('<ul></ul>'); // and an unordered list
        tree.append(li); //add it to the tree
    }
    if (secondary) { //if we have a secondary folder
        var ul = $('>ul',li); // find the unordered list in it
        // same as with primary, only here
        var li2=$('>li>label:contains("'+secondary+'"):first',ul).parent();
        if (!li2.length) {
            var index=$('>li',ul).length+1;
            var li2=$('<li></li>')
                .append($('<label for="subfolder'+index+'"></label>').text(secondary))
                .append('<input type="checkbox" checked id="subfolder'+index+'" />')
                .append('<ul></ul>')
            ul.append(li2);
        }
        li=li2; //set the current listitem to be the secondary
    }
    var ul = $('>ul',li); //get the unordered list child of the current listitem
    var index=$('>li',ul).length+1; //compute file index (if you need it)
    //add the file
    ul.append($('<li></li>').addClass('file').append($('<a href="#" target="_tab"></a>').text(displayName)));
});
// add the tree to the element with class 'SearchResults'
$('.SearchResults').append(tree);

我尽可能使用 jQuery，尽管我认为您应该创建一个将所有内容分组的 javascript 结构，然后将其转换为 jQuery DOM 操作。