how to separate a value from its node and group the node with others of its type

Question

End result I need is to have all the text nodes have the same indent. The @name field is not constant size. Parentnode has a varying number of children that must be parsed in the order received. possibleothernodes are not explicitly ordered in all cases.

XML:

<parentnode>
  <possibleothernodes1...n/>
  <node name="SomeBoldText">
   <text>Text1</text>
  </node>
  <node>
   <text>Text2</text>
  </node>
  <node>
   <text>Text3</text>
  </node>
  <node>
   <text>Text4</text>
  </node>
  <possibleothernodes2...n/>
</parentnode>

I need the resulting HTML to look like

possibleothernodes1
SomeBoldText: Text1
              Text2
              Text3
              Text4
possibleothernodes2

My real goal right now is how do I group Text1,Text2, Text3, Text4 into one div tag, and the @name into a different div tag? With two divs I can just float them to where they need to be.

Answer 1

How about something like this:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>

  <xsl:template match="parentnode">
    <div>
      <h1>
        <xsl:value-of select="node/@name"/>
      </h1>
      <div>
        <xsl:apply-templates select="node/text" />
      </div>
    </div>
  </xsl:template>

  <xsl:template match="node/text">
    <div>
      <xsl:value-of select ="."/>
    </div>
  </xsl:template>
</xsl:stylesheet>

When run on your sample input, the result is:

<div>
  <h1>SomeBoldText</h1>
  <div>
    <div>Text1</div>
    <div>Text2</div>
    <div>Text3</div>
    <div>Text4</div>
  </div>
</div>

Answer 2

ok, this is totally untested, and before coffee hits but hopefully it will be a good start using some JQuery:

$(function)(){
   $.ajax({
     url:"../folder/nameoffile.xml",
     dataType:"xml",
     success:function(xml){
       $(xml).find("node").each(function(){
           var sideName = $(this).attr("name");
           $("#idofSideDiv").append(sideName);
           var myNode = $(this).find("node").text();
           // ok, this is assuming that you have an ul list 
           // to contain the text defined in the node
           $("#idofULList").append("<li>"+myNode+"</li>");
       })
     }
   });
});

Like I said - totally untested, and probably some syntax errors - but hopefully it can be a good start for a google search.