jQuery - Raphael - SVG - selector based on custom data

Question

I have assigned a custom data attribute to some circles added to the Raphael canvas as follows in a each() loop:

marker.data('transaction', transaction);

How do I find elements on the canvas that have the same transaction data value?

Currently I have the code:

var found = document.querySelectorAll("[transaction='" + current_transaction +"']");

Which should return a NodeList with the elements, but it doesn't work. To retrieve the data into a variable, it is as simple as var foo = marker.data('transaction'), but obviously, this doesn't work if I want to retrieve a NodeList of the elements.

Therefore, I want my selector to be look as follows, but I cannot work out the correct syntax:

var found = document.querySelectorAll("data('transaction' = 1)");

Any help would be much appreciated

Answer 1

Being that Raphael must support VML, it doesn't keep data in the DOM as is normal with html5 applications. If you want to store data in the dom you must access the html node and set the attribute there...

marker.node.setAttribute('data-transaction', transaction);

Then you can then query the elements with querySelectorAll. Keep in mind this will fail on < IE8.

If you want to keep older IE support I'd recommend writing a function that iterates over your markers and returns the Raphael object when mark.data("transaction") == transaction

Answer 2

I think the problem is that jQuery has no access to the SVG nodes. You have to try normal Javascript. The problem could be the compatibility with older browsers if you use querySelectorAll.

Look here: http://dean.edwards.name/jsb/behavior/querySelectorAll.html and here: http://www.w3.org/TR/selectors-api/#queryselectorall

Possible solution: Have a look in Raphael-Doc : http://raphaeljs.com/reference.html#Element.data