Question

I am working with the following code to traverse an XML tree no matter how deep it may be. The problem is it only returns the very first root node GetArchive. Like.. its tag name and that is all. What am I missing?

$.get('getArchive.xml', null, function (data) {

               var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive');

       var JanEntries = $(data).find('GetArchive Y2011 Jan Entry').each( function(){

    var JanEntryId    = $(this).find("janeid").text();    ul.append('<li>' + JanEntryId    + '</li>');  
    var JanEntryDate  = $(this).find("janedate").text();  ul.append('<li>' + JanEntryDate  + '</li>');   
    var JanEntryTime  = $(this).find("janetime").text();  ul.append('<li>' + JanEntryTime  + '</li>');  
    var JanEntrytitle = $(this).find("janetitle").text(); ul.append('<li>' + JanEntrytitle + '</li>');  
    var JanEntryBody  = $(this).find("janebody").text();  ul.append('<li>' + JanEntryBody  + '</li>');  

    $(this).find("Comment").each(function () { 
    var CommentId     = $(this).find("cid").text();   ul.append('<li>' + CommentId   + '</li>');
    var CommentDate   = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>');
    var CommentTime   = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>');
    var CommentFrom   = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>');
    var CommentBody   = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>');  
    });  

});

               var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive');

       var FebEntries = $(data).find('GetArchive Y2011 Feb Entry').each( function(){

    var FebEntryId    = $(this).find("febeid").text();    ul.append('<li>' + FebEntryId    + '</li>');  
    var FebEntryDate  = $(this).find("febedate").text();  ul.append('<li>' + FebEntryDate  + '</li>');   
    var FebEntryTime  = $(this).find("febetime").text();  ul.append('<li>' + FebEntryTime  + '</li>');  
    var FebEntrytitle = $(this).find("febetitle").text(); ul.append('<li>' + FebEntrytitle + '</li>');  
    var FebEntryBody  = $(this).find("febebody").text();  ul.append('<li>' + FebEntryBody  + '</li>');  

    $(this).find("Comment").each(function () { 
    var CommentId     = $(this).find("cid").text();   ul.append('<li>' + CommentId   + '</li>');
    var CommentDate   = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>');
    var CommentTime   = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>');
    var CommentFrom   = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>');
    var CommentBody   = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>');  
    });  

});

}, 'xml');

Here is my XML structure.

<?xml version="1.0" encoding="utf-8"?>
<GetArchive>
  <Y2012>
    <Jan>
      <Entry>
        <janeid>&lt;b&gt;Jan Entry ID 1&lt;/b&gt;</janeid>
        <janedate>entry date</janedate>
        <janetime>entry time</janetime>
        <janetitle>entry title</janetitle>
        <janebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</janebody>
        <Comments>
          <Comment>
            <cid>Jan Comment ID 1</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Jan Comment ID 2</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
      <Entry>
        <janeid>&lt;b&gt;Jan Entry ID 2&lt;/b&gt;</janeid>
        <janedate>entry date</janedate>
        <janetime>entry time</janetime>
        <janetitle>entry title</janetitle>
        <janebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</janebody>
        <Comments>
          <Comment>
            <cid>Jan Comment ID 3</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Jan Comment ID 4</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
    </Jan>
    <Feb>
      <Entry>
        <febeid>&lt;b&gt;Feb Entry ID 1&lt;/b&gt;</febeid>
        <febedate>entry date</febedate>
        <febetime>entry time</febetime>
        <febetitle>entry title</febetitle>
        <febebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</febebody>
        <Comments>
          <Comment>
            <cid>Feb Comment ID 1</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Feb Comment ID 2</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
      <Entry>
        <febeid>&lt;b&gt;Feb Entry ID 2&lt;/b&gt;</febeid>
        <febedate>entry date</febedate>
        <febetime>entry time</febetime>
        <febetitle>entry title</febetitle>
        <febebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</febebody>
        <Comments>
          <Comment>
            <cid>Feb Comment ID 3</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Feb Comment ID 4</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
    </Feb>
  </Y2012>
  <Y2011>
    <Jan>
      <Entry>
        <janeid>&lt;b&gt;Jan Entry ID 1&lt;/b&gt;</janeid>
        <janedate>entry date</janedate>
        <janetime>entry time</janetime>
        <janetitle>entry title</janetitle>
        <janebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</janebody>
        <Comments>
          <Comment>
            <cid>Jan Comment ID 1</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Jan Comment ID 2</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
      <Entry>
        <janeid>&lt;b&gt;Jan Entry ID 2&lt;/b&gt;</janeid>
        <janedate>entry date</janedate>
        <janetime>entry time</janetime>
        <janetitle>entry title</janetitle>
        <janebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</janebody>
        <Comments>
          <Comment>
            <cid>Jan Comment ID 3</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Jan Comment ID 4</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
    </Jan>
    <Feb>
      <Entry>
        <febeid>&lt;b&gt;Feb Entry ID 1&lt;/b&gt;</febeid>
        <febedate>entry date</febedate>
        <febetime>entry time</febetime>
        <febetitle>entry title</febetitle>
        <febebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</febebody>
        <Comments>
          <Comment>
            <cid>Feb Comment ID 1</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Feb Comment ID 2</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
      <Entry>
        <febeid>&lt;b&gt;Feb Entry ID 2&lt;/b&gt;</febeid>
        <febedate>entry date</febedate>
        <febetime>entry time</febetime>
        <febetitle>entry title</febetitle>
        <febebody>entry &lt;b&gt;body&lt;/b&gt;! html friendly</febebody>
        <Comments>
          <Comment>
            <cid>Feb Comment ID 3</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
          <Comment>
            <cid>Feb Comment ID 4</cid>
            <cdate>comment date</cdate>
            <ctime>comment time</ctime>
            <cfrom>comment from</cfrom>
            <cbody>comment body! text only</cbody>
          </Comment>
        </Comments>
      </Entry>
    </Feb>
  </Y2011>
</GetArchive>

Answer 1

I’m having a tough time understanding exactly what you’re trying to do, but something along these lines might get you started:

//custom function to return all text nodes
$.fn.textNodes = function(){
    return $(this).contents().filter(function(){ 
        return this.nodeType == 3 || this.nodeName == "BR"; 
    });
}

// append all text nodes to list
ul.append($(data).textNodes().wrap("<li/>"));

EDIT : <li> elements aren’t being created. Here are a few alternatives to try:

ul.append($(data).textNodes().wrap("<li>");

ul.append($(data).textNodes().wrap("<li></li>");

ul.append($(data).textNodes().wrap(function(){
    return "<li>" + $(this).text() + "</li>";
});    

Here’s another version of the textNodes function:

//custom function to return all text nodes
$.fn.textNodes = function() {
    var ret = [];
    this.each( function() {
        var fn = arguments.callee;
        $(this).contents().each( function() {
            if ( this.nodeType == 3 || $.nodeName(this, "br") ) 
            ret.push(this);
            else fn.apply($(this));
        });
    });
    return $(ret);
}