使用jQuery和JavaScript，如何区分具有相同名称属性的两个XML级别？

Question

所以这是我尝试使用jQuery解析的示例Documentation.XML文件

<DocPortal Version="">
    <Folder Name="Sample Drawings" User="*">
        <File Type="TILES" Name="Sample1" FileName="Sample1.zip"/>
    </Folder>
    <Folder Name="Sample Site Information" User="*">
        <Folder Name="SampleInnerFolder1" User="*">
            <File Type="PDF" Name="Sample1" FileName="Sample1.pdf"/>
            <File Type="PDF" Name="Sample2" FileName="Sample2.pdf"/>
        </Folder>
        <Folder Name="SampleInnerFolder2" User="*">
            <File Type="PDF" Name="Sample1" FileName="Sample1.pdf"/>
            <File Type="PDF" Name="Sample2" FileName="Sample2.pdf"/>
        </Folder>
        <File Type="PDF" Name="Sample1" FileName="Sample2.pdf" QR=""/>
        <File Type="PDF" Name="Sample2" FileName="Sample2.pdf" QR=""/>
    </Folder>
</DocPortal>

当我执行以下代码时，将获得两个级别中所有文件夹名称的列表

$.get(lDocumentationFilePath , function(data){
    $('#content').empty();
    $(data).find('Folder').each(function(){
        var $Folder = $(this);
        console.log($Folder.attr('Name'));
    });
});

我想要的只是每个顶级文件夹名称的列表。 因此，只需“样本图”和“样本站点信息”。

有任何想法吗？

Answer 1

您需要使用children（）而不是find（）才能仅获取顶级后代。

$(data).children('Folder').each(function(){
    var $Folder = $(this);
    console.log($Folder.attr('Name'));
});

给定一个表示一组DOM元素的jQuery对象，.children（）方法使我们可以在DOM树中搜索这些元素的子代，并从匹配的元素构造一个新的jQuery对象。 .children（）方法与.find（）的不同之处在于.children（） 仅沿 DOM树向下移动一个级别 ，而.find（）可以向下遍历多个级别以选择后代元素（孙子等）， 参考 。