Question

I need to compute new and edit both the ‘x’ and ‘y’ attributes of an SVG element (rect) using a single jQuery call.

Now I know you can do this:

var incBy = 20;

$('#test').attr('x', function(i, val) {
    return parseInt(val) + incBy;
});

which is fine for computing and editing single attributes, but how can I edit multiple attributes in this way?

Answer 1

If you factor it out, you can also do it in one line:

$('#test').attr('x', myFunction).attr('y', myFunction);

function myFunction(i, val) {
  return parseInt(val) + incBy; 
}

Or abstract it more and pass into a separate function the attributes you want to apply this to

process('x', 'y');

function process() {
  for (var i = 0; i < process.arguments.length; i++)
    $('test').attr(process.arguments[i]), myfunction);

  function myFunction(i, val) {
    return parseInt(val) + incBy; 
  }
}

It depends on how far you want to go. You could include the function to be called in the parameters, and the selection criteria too.