Search jQuery

jQuery Forum

Using jQuery

MegaNewbie

How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

in Using jQuery • 8 years ago

This is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Parse Test</title>
<script type="text/javascript" src="jQuery-1.9.1.js"></script>
</head>
<body>
<div id="outputDiv">Output DIV<br/></div>
<script>
alert("begin");
var xml =
"<rss>Test RSS" +
"<channel>Channel Info</channel>" +
"<channel>Channel 01" +
"<episode>Episode 01" +
"<break>First Break</break>" +
"</episode>" +
"</channel>" +
"<channel>Channel 02</channel>" +
"<episode>Episode 02 - demote</episode>" +
"<channel>Channel 03</channel>" +
"</rss>";
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
var iString;
traverse($xml);
function traverse(tree) {
var fontColor;
$(tree).contents().each(function() {
                              var p = this.parentNode.nodeName;
     var n = this.nodeName;
     var hierarchyLevel = $(this).parents().length;

     iString = repeat("    ", hierarchyLevel);

     // Working out the demote function
     /* if (($(this).text().indexOf("demote") != -1) && (this.nodeType ==3)) {

      $("#outputDiv").append(iString + this.parentNode.nodeName + "<br/>");

      alert($(this).text());

     } */
     if (($(this).text().indexOf("demote") != -1) && (this.nodeType ==1) && ($(this).parents().length > 0)) {

      // alert($(this).parents().length);
      // alert($(this).text());

      // $(this).empty();
      // $(this).remove();

      // traverse(tree);

     }

     if (this.nodeType == 3) { // text node

      fontColor = "green";

      console.log('parent-nodeName: ' + p);
      console.log('currnt-nodeName: ' + n);
      console.log('text node value: ' + $(this).text());

      console.log($(this).parents().length)
      // node value: $(this).text() or this.nodeValue
      $("#outputDiv").append(iString + "<" + this.nodeName + " level=" + hierarchyLevel + ">"); // tag

      $("#outputDiv").append("<font color=" + fontColor + ">" + $(this).text() + "</font>"); // text contents
     } else {

      fontColor = "black";
      console.log('parent-nodeName: ' + p);
      console.log('currnt-nodeName: ' + n);
      console.log('tag name: ' + this.nodeName);

      console.log(hierarchyLevel)

      $("#outputDiv").append(iString + "<" + this.nodeName + " level=" + hierarchyLevel + ">" + "<br/>");
      traverse(this);

     }

     if (this.nodeType == 3) { // text node
$("#outputDiv").append("<" + "\/" + this.nodeName + ">" + "<br/>");
     } else {

      $("#outputDiv").append(repeat("    ", $(this).parents().length) + "<" + "\/"
       + this.nodeName + ">" + "<br/>");

     }

    });

    return tree;

   }

   function repeat(str, times) {

    return new Array(times + 1).join(str);

   }

   alert("end");

  </script>
</body>
</html>

Any ideas on how to move it?

Thanks,

Doug

Replies(10)

kbwood.au

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Try this:

if (this.nodeType == 3 && $(this).text().indexOf('demote') != -1) {
$(this).prev().append(this);
}

jakecigar

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

I have to ask why? It looks like you are traversing an Podcast. That’s pretty much a classic thing.

Rather than trying to make sense of your code, can you show what you really want to generate?

JΛ̊KE

MegaNewbie

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

  <title>Parse Test</title>

  <script type="text/javascript" src="jQuery-1.9.1.js"></script>
  <script type="text/javascript" src="jQuery"></script>

</head>
<body>

  <div id="outputDiv">Output DIV<br/></div>

  <script>

   alert("begin");

   var xml = "<rss id=\"rss\">Test RSS" +
      "<channel>Channel Info</channel>" +
      "<channel>Channel 01"     +
       "<episode>Episode 01"   +
        "<break>First Break</break>" +
       "</episode>" +
      "</channel>"         +
      "<episode>Episode 01 - demote</episode>" +
      "<channel>Channel 02</channel>"   +
      "<episode>Episode 02 - demote</episode>" +
      "<channel>Channel 03</channel>"   +
       "</rss>";

   var xmlDoc = $.parseXML(xml);
   var $xml   = $(xmlDoc);
   var iString;

   var $newTree = moveElements($xml);
   var $t = traverse($newTree);

   function traverse(tree) {

    var fontColor;

    $(tree).contents().each(function() {

     var parentEls = $(this).parents().map(function() { return this.tagName; }).get().join( ", " );
     var parentsArray = parentEls.split(",");

     /* alert("parents: " + parentEls + " | " +
        "topParent: " + parentsArray[0] + " | " +
        "btmParent: " + parentsArray[parentsArray.length-1] + " | " +
        "thisNode: " + this.nodeName); */
     var p = this.parentNode.nodeName;
     var n = this.nodeName;
     var hierarchyLevel = $(this).parents().length;

     iString = repeat("    ", hierarchyLevel);

     if (this.nodeType == 3) { // text node

      fontColor = "green";

      console.log('parent-nodeName: ' + p);
      console.log('currnt-nodeName: ' + n);
      console.log('text node value: ' + $(this).text());

      console.log($(this).parents().length)
      // node value: $(this).text() or this.nodeValue
      $("#outputDiv").append(iString + "<" + this.nodeName + " level=" + hierarchyLevel + ">"); // tag

      $("#outputDiv").append("<font color=" + fontColor + ">" + $(this).text() + "</font>"); // text contents
      $("#outputDiv").append("<" + "\/" + this.nodeName + ">" + "<br/>");

     } else {

      fontColor = "black";
      console.log('parent-nodeName: ' + p);
      console.log('currnt-nodeName: ' + n);
      console.log('tag name: ' + this.nodeName);

      console.log(hierarchyLevel)

      $("#outputDiv").append(iString + "<" + this.nodeName + " level=" + hierarchyLevel + ">" + "<br/>");
      traverse(this);

     }

     // This guides the closing tag
     if (this.nodeType == 3) { // text node
// $("#outputDiv").append("<" + "\/" + this.nodeName + ">" + "<br/>");
     } else {

      $("#outputDiv").append(repeat("    ", $(this).parents().length) + "<" + "\/"
       + this.nodeName + ">" + "<br/>");

     }

    });

    return tree;

   }

   function repeat(str, times) {

    return new Array(times + 1).join(str);

   }

   function moveElements(tree) {
$(tree).contents().each(function() {
    var parentEls = $(this).parents().map(function() { return this.tagName; }).get().join( ", " );
    var parentsArray = parentEls.split(",");

    var btmParent = parentsArray[parentsArray.length-1];
    var topParent = parentsArray[0];

    /* alert("parents: " + parentEls + " | " +
       "topParent: " + parentsArray[0] + " | " +
       "btmParent: " + parentsArray[parentsArray.length-1] + " | " +
       "thisNode: " + this.nodeName); */
     if ((this.nodeType == 3) && (topParent != btmParent)) { //

      if (this.parentNode.text.indexOf("demote") != -1) {

       $(this).parent().prev().append($(this).parent());

       $("#outputDiv").append("<font color=red>" + "text-node: " + $(this).text() + "</font>" + "<br/>");

      } else {
       $("#outputDiv").append("<font color=blue>" + "text-node: " + $(this).text() + "</font>" + "<br/>");

      }

     } else {

      $("#outputDiv").append("elem-node: " + this.nodeName + "<br/>");

      moveElements(this);

     }

    });

    return tree;

   }

   alert("end");

  </script>
</body>
</html>

jakecigar

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Which browser does that work with?

You jump into javaScript, avoiding jQuery, several times,

if (this.parentNode.text.indexOf("demote") != -1) {

Does not work in all browsers.

JΛ̊KE

MegaNewbie

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Jake,

Yes, that IS a bit of a kludge. Would you help me to update that technique with jQuery instead of the IE9 XML DOM?

Thanks

jakecigar

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

I see other flaws like the nodeName of a nodeType === 3.

http://plnkr.co/edit/F7Vjbb2n4CbOt2tgh0lr?p=preview

JΛ̊KE

MegaNewbie

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Jake,

nodeName of a nodeType? Not sure what you mean...

jakecigar

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

See the demo. if nodeType === 3, there is no nodeName. It’s just text.

You need to test your code in all the browsers.

The point of plunker is to allow someone else to fork my plunk and keep working on it.

JΛ̊KE

MegaNewbie

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

Using #text as a nodeName works fine for my purposes, but thanks.

jakecigar

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

8 years ago

#text makes it invalid XML. But if you are happy, I am happy.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Replies(10)

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Re: How do I "demote" an XML Node (move it to the lastChild position of the previous sibling)?

Statistics

Tags

Actions

Related Posts