adding ID's to raphael objects

Question

I have a fairly large map consisting of Raphael paths which im trying to make accessible to some jquery ajax scripts to be populated. I've tried to add an ID or anything to make it accessible from jquery in an organized fashion.

As im new to Raphael I cant figure out a good way of achieving this. I've tried using .data() to add an ID for each dot with say "seat_1","seat_2" and so on but been unsuccessful so far.

how would I go about organizing this code so I could manipulate it by looping? I realize that its a fairly open ended question but any suggestion is much appreciated

Demo here: http://www.sam-sys.in/demo/pushparaj/ticketreservation/?page_id=203

var path_gs = rsr.path("M5.834,698.336c-3.217,0-5.833,2.615-5.833,5.831 c0,3.215,2.616,5.833,5.833,5.833c3.219,0,5.835-2.618,5.835-5.833C11.669,700.951,9.053,698.336,5.834,698.336"); 
path_gs.attr({"clip-path": 'url(#SVGID_2_)',fill: '#777675',parent: 'group_a','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_gs');

which generates

<path style="stroke-opacity: 1; " fill="#008000" stroke="#000000" d="M5.834,698.336C2.6169999999999995,698.336,0.0009999999999994458,700.951,0.0009999999999994458,704.167C0.0009999999999994458,707.3820000000001,2.6169999999999995,710,5.834,710C9.052999999999999,710,11.669,707.382,11.669,704.167C11.669,700.951,9.053,698.336,5.834,698.336" stroke-width="0" stroke-opacity="1"></path>

Answer 1

Well, the way I'm doing this is the following. First I write all the paths in an object, for example:

var paths = {
    path1: 'the paths coordinates',
    path2: 'the paths coordinates',
    path3: 'the paths coordinates',
}

Then you just loop trough all the paths, seting the coordinates for each path and giving them an ID (this is an internal Raphael's ID):

for(path in paths){
   var newpath = paper.path(paths[path]);
   newpath.attr({options})
   newpath.id = path;
}

Now, if you want to get one of this elements you can use the next Raphael feature:

var thisPath = paper.getById('path1');

This way you can use the path on any of the Raphael methods. So, if you need to get the node in the dome you can do the following:

var node = thisPath.node

But if you need to animate the path, you better use the Raphael's animate method, or if you need to change attibutes the attr method.

thisPath.animate(.....)

If you need to apply some change to all the paths, you can use:

paper.forEach(function(thisArg))

you need to pass the function to run on each element and thisArg reference the element on each iteration

And maybe you want to take a look to the Raphael's sets wich can be useful for use methods on groups of elements. If you need any help using this features just let me know and I'll do my best to help you out. Bye!

Answer 2

You could just push them to an array :

var pathArray = new Array();
var path_gs = rsr.path("path coords");
pathArray.push(path_gs); 

Then loop through pathArray.

Another option is grouping them in sets.