JQuery child loop XML

Question

Используя JQuery и AJAX, я получаю XML-документ, а затем просматриваю документ, пытаясь сделать что-то на каждом уровне XML-тегов/узлов, от родительских до детей, а затем детей детей соответственно ,

Что я сейчас работаю, но специально написано до предела детей детей детей (не идеально).

Окончательное приложение может иметь открытое количество детей для выполнения действия.

How can i make this account for any number of children without the inefficiency?

Я попытался сделать функцию с основой того, что я хотел бы достичь на каждом уровне ребенка. Но это не работает должным образом, по сути, нарушая сценарий.

Функция

function childX() { 
    $(this).children().each(function() 
    { 
     $("#output").append("<div id='"+(this).nodeName+"'>"+(this).nodeName+"</div><br />"); 
    }); 
} 

Основной сценарий

$(xml).find("RecentTutorials").children().each(function() 
    { 

    $("#output").append("<div id='"+(this).nodeName+"'>"+(this).nodeName+"</div><br />"); 


    $(this).children().each(function() 
    { 
     $("#output").append("<div id='"+(this).nodeName+"'>"+(this).nodeName+"</div><br />"); 

     $(this).children().each(function() 
     { 
      $("#output").append("<div id='"+(this).nodeName+"'>"+(this).nodeName+"</div><br />"); 

      $(this).children().each(function() 
      { 
       $("#output").append("<div id='"+(this).nodeName+"'>"+(this).nodeName+"</div><br />"); 

      }); 

     }); 

    }); 


    //alert((this).nodeName); 
    }); 

Answer 1

Самый простой способ сделать это, вероятно, будет использовать рекурсивную функцию - то есть функция, которая называет себя ,

addChildren($(xml).find("RecentTutorials")); 

function addChildren($parent) { 
    $parent.children().each(function(i, child) { 
     $("#output").append(
      "<div id='" + child.nodeName + "'>" + 
       child.nodeName + 
      "</div><br />" 
     ); 
     addChildren($(child)); 
    }); 
} 

Для интересного теста, попробуйте открыть консоль JavaScript на любой странице, которая использует JQuery - такие, как та, которую мы прямо сейчас - и вставить в этом подобный код:

logChildren($(document.body)); 

function logChildren($parent) { 
    $parent.children().each(function(i, child) { 
     console.log(child.nodeName); 
     logChildren($(child)); 
    }); 
} 

It будет печатать nodeName для каждого элемента на странице.

BTW Я рекомендую не использовать this и $(this) при использовании jQuery.each(). Вместо этого используйте явные имена параметров, как в моих примерах. Это проще понять код таким образом, и меньше подвержено ошибкам. Это связано с тем, что ваша функция childX() не работает вообще. Он ссылается на в первой строке, но при прямом вызове функции this вряд ли будет тем, что вы ожидаете: если вы не используете строгий режим, this - это ссылка на объект window!