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, and get their location into an array in a for loop, and then perform actions on that array?

For example in pseudo code:

for (current_transaction = 1; current_transaction < 10; current_transaction++) {
    var array = find the location of elements with transaction data value of 
    current transaction;
    //perform some function with that array
}

My question is really then, how do you ‘getElementByData’, and then search for elements with the same data. The rest is simple.

Answer 1

document.querySelectorAll(‘[transaction]’) would get everything with the attribute transaction.

Use [transaction=’foo’] to get just transaction attributes having the value foo e.g.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <path transaction="1"/>
  <path transaction="2"/>
  <path transaction="1"/>

  <script>
    for (var current_transaction = 1; current_transaction &lt; 2; current_transa
ction++) {
       var found = document.querySelectorAll("[transaction='" + current_transact
ion +"']");
       alert(found.length);
    }
  </script>

</svg>