Geek Answers Handbook

Find descendant from XML using jQuery

I have an XML file:

<?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>

I want to find all the descendants (with all children to the leaf node) of a particular node. For example, here test descendants of test1,test12,test123,test1234 & test12345

If I find descendants for test1 , then the result will be 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); }); } }); });

Using jQuery .children() gives me only that node an immediate child. He will not give his grandchildren. For example, for test it will only warn test1 & test12345 .

+4
source share
2 answers

You can achieve this by doing a preliminary walk. Its recursive function will process the nodes in the order you want. See How to write a simple DOM tree traversal algorithm in jQuery format?

Given the @ k-prime answer, your example would be:

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

Jsfiddle

As a separate function:

 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

Hope this helps!

+1
source

In a more ordinary and primitive way, you can do this: 

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

code>

This recursively computes all child nodes of a given root node.

0
source

More articles:


All Articles