Question

I have this array of rects using jQuery and Raphael:

squares = [];
for (i = 0; i < 2; ++i) {
    var square = paper.rect(0 + 100*i, 0, 70, 70);
    square.node.idx = i;
    square.node.setAttribute('class', 'foo');
    squares.push(square);
}

I can successfully query various attributes, like:

alert(squares[0].attr('x'));

or

alert(squares[0].attr('width'));

but not:

alert(squares[0].attr('class'));

Is there a special reason for which this is not valid?
Is there an (other) way to query the class attribute?

Thanks,
Adrian

Answer 1

Classes in SVG aren’t quite the same as classes in everything else – and in Raphael, which deals with SVG and IE’s VML, things get even more hairy.

First of all, they’re on the page’s DOM element (Raphael’s output) not in the Raphael JS object itself. You’d use Raphael’s .node to get the actual DOM path (e.g. with jQuery, $(squares[0].node).someJqueryFunction();) but this sort of thing is best avoided where possible for the above reasons. This related question has answers with more info.

If you want to use classes to store data (e.g. like using ‘active’, ‘inactive’ classes as switches), you’re best off using Raphael’s .data function which apparently is for storing arbitrary values. This related question has answers with more info.