使用 jQuery 从 XML 中查找后代答案

【问题标题】：Find descendant from XML using jQuery使用 jQuery 从 XML 中查找后代
【发布时间】：2013-02-02 09:58:27
【问题描述】：

我有一个 XML 文件：

    <?xml version="1.0" encoding="ISO-8859-1"?>
<childrens>
 <child id="1" value="Root Catalog" parent_id="0">
  <child id="2" value="Apparel" parent_id="1">
    <child id="3" value="Accessories" parent_id="2">
        <child id="4" value="Handbags" parent_id="3">
            <child id="5" value="Jewelry" parent_id="4"/>
            <child id="6" value="test1" parent_id="4"/>
            <child id="7" value="test2" parent_id="4"/>
            <child id="15" value="test3" parent_id="4"/>
        </child>
    </child>
  </child>
  <child id="8" value="test_A" parent_id="1">
    <child id="9" value="test_B" parent_id="8">
        <child id="10" value="test_C" parent_id="9">
            <child id="11" value="test_D" parent_id="10"/>
        </child>
    </child>
  </child>
  .
  .
  .
  .
  .
  .
  <child id="1111" value="test" parent_id="1">
    <child id="1112" value="test1" parent_id="1111">
        <child id="1113" value="test12" parent_id="1112">
            <child id="1114" value="test123" parent_id="1113"/>
            <child id="1115" value="test1234" parent_id="1114"/>
        </child>
    </child>
    <child id="1116" value="test12345" parent_id="1111"/>
  </child>  
 </child>
</childrens>

我想找到特定节点的所有后代（所有子节点直到叶节点）。比如这里test的后代是test1,test12,test123,test1234 & test12345

如果我找到test1 的后代，那么结果将是test12,test123,test1234。

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('child[value="test"]').children().each(function(){
            var i = $(this).attr('value');
            alert(i);

        });
    }
});
});

使用 jQuery .children() 只给了我该节点的直接子节点。它不会给它的孙子孙女。例如，对于test，它只会提醒test1 & test12345。

【问题讨论】：

标签： jquery xml ajax

【解决方案1】：

您可以通过预先遍历来实现。它是一个递归函数，它将按照您想要的顺序处理节点。见How to write a simple preorder DOM tree traversal algorithm in jQuery?

考虑到@k-prime 答案，您的示例将是：

$(xml).find('child[value="test"]').children().each (function processNodes()
{
    alert($(this).attr('value'));
    if (this.nodeType != 3)
        $(this).children().each(processNodes);
});

JsFiddle

作为一个单独的函数：

function recursiveDescendantsValues(node, arr) {
    node.children().each(function () {
        arr.push($(this).attr('value'));
        if ($(this).nodeType != 3) {
            recursiveDescendantsValues($(this), arr);
        }
    });
}
jQuery.fn.descendantsValues = function() {
    var arr = []
    recursiveDescendantsValues($(this), arr);
    return arr;
};

JsFiddle

希望对你有帮助！

【讨论】：

@M.I.T.抱歉，解决方案已更新，您可以在 jsfiddle.net/97qx4 看到它正在运行。由于您想要所有节点（包括非叶子），因此您不需要在条件内进行处理。此外，contents() 产生节点之间的空间。

【解决方案2】：

以更通俗和原始的方式，您可以这样做：

    function iterative_logger(root, t) {
        if (t > 0) console.log(root.attr('value'));
        //console.log("Traversing : " + root.attr('value')+"\n");
        var root_children = $(root).children();
        //console.log("Found " + root_children.length + " children\n");
        if (root_children.length > 0)
            root_children.each(function () {
                t++;
                //console.log("\t" + $(this).attr('value'));
                iterative_logger($(this), t);
            });
    }
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) {
                iterative_logger($(xml).find('child[value="test"]'), 0);
            }
        });
    });

这递归地计算给定节点“根”的所有后代节点。

【讨论】：