Question

I’m wondering if anyone knows how to do this: I have an XML tree like this – I have added the numbers in the order they should appear, but this needs to be dynamic:

<scene id="1>
  <scene id="2>
    <scene id="3"/>
  </scene>
  <scene id="4>
<scene id="5>
<scene id="6>

Where there are 3 parent scenes, and any number of children and subchildren for each of the three parents. Each of the three scenes will be assigned its own sprite image for use representing an icon for each scene, and all of its children will use its the parent sprite, but I need to figure out a system to assign the sprite the proper background position based on where it is in the tree. So what I need to do is say:

Each root sprite is at 0px horizontal. The first child is at (1*80px). The second child is at 2*80px. The first subchild is at whatever the last child was at, plus 80px.

So essentially I need to assign logical numbers to each node in this sequence. How would I do this mathematically? I’m using javascript (jquery) to parse the XML.

Thanks for any ideas you can come up with.

Answer 1

Assuming you are using jQuery 1.5+ and you’ve got a well formed, valid XML document (i.e. with a root element) you could do something like this:

var nextId = 1;
var xmlStr = '<movie>' +
             '  <scene>' + // id1
             '    <scene>' + // id2
             '      <scene/>' + // id3
             '    </scene>' +
             '    <scene/>' + // id4
             '  </scene>' +
             '  <scene/>' + // id5
             '</movie>';
var doc = $(xmlStr);
$(doc).find('scene').each(function(i, el) {
  el.id = ("id" + nextId++);
});

Note that valid “id” attributes must not start with a digit, hence the new values “id1”, etc. The resulting doc should have each “scene” element with the incremented “id” value.

doc;
// <movie>​
//   <scene id=​"id1">​
//     <scene id=​"id2">​
//       <scene id=​"id3">​</scene>​
//     </scene>​
//     <scene id=​"id4">​</scene>​
//   </scene>​
//   <scene id=​"id5">​</scene>​
// </movie>​