How do I call a jQuery function with a dynamic name?

Question

I can't believe that I've been unable to dig out a solution to this problem. It looked to me like a very "regular" problem whose solution would litter the web!

I have these arrays returned from a database query:

var ids = ['12', '15', '40'];
var actions = ['hide', 'show', 'fadeIn'];

I want to loop through the arrays and carry out the appropriate action on the DOM, like so:

for(var i=0; i < ids.length; i++){
    $('#row_'+ids[i]).actions[i]();
}

Now you get the idea. Actually I didn't expect the $('#row_'+ids[i]).actions[i](); to work as is. I have tried things like

$('#row_'+ids[i]).effect(actions[i]);

To no avail. I believe eval() should work and (in desperation) even tried that but couldn't get the right string for it to work.

Elsewhere on Stack Overflow, I have come across similar issues solved using the window global, like:

var fn = 'hideSomething';
window.fn();//where hideSomething was a defined function.

But this one is defined on jQuery, not on window.

So here we are!

dupe : http://stackoverflow.com/questions/969743/how-do-i-call-a-dynamically-named-method-in-javascript — adeneo, Nov 28 '15 at 22:33
@adeneo: I don't see much jQuery discussion on the page you linked. — Ifedi Okonkwo, Nov 28 '15 at 22:39
Yeah, I guess so. Sometimes, babies would need spoon-feeding, you know. — Ifedi Okonkwo, Nov 28 '15 at 22:44
Haba! Why did the other guy delete his answer? Pity, 'cause the brevity is something many will find attractive (me included) often. — Ifedi Okonkwo, Nov 28 '15 at 22:49

score 5 · Accepted Answer · answered Nov 28 '15 at 22:29

You need to use [varhere] to access a property/method by variable name. Since your property name is in actions[i], then you would do this:

$('#row_'+ids[i])[actions[i]]();

Or, in a slightly easier scheme to follow exactly what is happening:

var method = actions[i];
$('#row_'+ids[i])[method]();

You can use the dot syntax obj.prop when the property name is known ahead of time. When it's in a variable and not known ahead of time, you use the obj[prop] syntax. Since a method is just a property, the same applies to jQuery methods too.

for(var i=0; i < ids.length; i++){
    $('#row_'+ids[i])[actions[i]]();
}

Thank you for a quick, helpful and elaborate reply. I guess the "elaborate" will have to win you the acceptance! — Ifedi Okonkwo, Nov 28 '15 at 22:42

score 2 · Answer 2 · answered Nov 28 '15 at 22:29

2

Use square bracket notation in order to access the property:

for (var i = 0; i < ids.length; i++) {
  $('#row_' + ids[i])[actions[i]]();
}

Example Here

See: Property accessors in JS (MDN)

answered Nov 28 '15 at 22:29

Josh Crozier

233,099
56
391
304

Thank you for a quick and helpful reply. – Ifedi Okonkwo Nov 28 '15 at 22:40
Thank you for undeleting ;) – Ifedi Okonkwo Nov 29 '15 at 18:11

How do I call a jQuery function with a dynamic name?

2 Answers2