jQuery - Raphael - SVG - selector based on custom data
html, javascript, jquery, raphael
Solution
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`
Problem
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