用jQuery解析XML文本

Question

I'm working with a database that has X and Y points per group, it's being used to draw outlines of images.

Right now in my web side this code is what I use to get the points:

var Drawing = $(XML).find('DrawingXML');

alert($(Drawing[1]).text());

Result:

 <DrawingPoints>
   <Point><X>1</X><Y>2</Y></Point>
   <Point><X>2</X><Y>4</Y></Point>
   <Point><X>3</X><Y>5</Y></Point>
   <Point><X>2</X><Y>2</Y></Point>
   <Point><X>0</X><Y>4</Y></Point>
 </DrawingPoints>

Using the .replace() call only changes one item so it's usable for something like this:

.replace("</DrawingPoints>",""); 

but if I want to replace all 'Point' tags I'm out of luck.

My goal is to use the canvas feature to draw the points out so I want it to be parsed like this:

ctx.beginPath();
ctx.moveTo(1,2);
ctx.lineTo(2,4);
ctx.lineTo(3,5);
ctx.lineTo(2,2);
ctx.lineTo(0,4);
ctx.stroke();

I'm not going to use this with IE browsers just Safari/Chrome, if that helps out.

Answer 1

Get all your X and Y values at once:

var points = {};
points.X = Array();
points.Y = Array();
var ix = 0;

$(XML).find('DrawingXML DrawingPoints Point X').each(function()
{
    points.X[ix++] = $(this).text();
});
$(XML).find('DrawingXML DrawingPoints Point Y').each(function()
{
    points.Y[ix++] = $(this).text();
});

This might not be exact, I didn't test it and my Javascript is a bit rusty, but you get the idea.

Answer 2

In this case you'll probably save an awful lot of brainache by using a library instead of writing your own code.

I reckon d3 does what you need:

• d3.xml
• d3.geo.path

Answer 3

Check out this question/answer. It's not Prototype specific and should help you here.

How to parse XML string with Prototype?