jQuery 'each' shorthand

Question

Is there any way I can short hand jquery each? or is there any alternative in writing jquery each which is shorter than the code below?

$('someElement').each(function () {
    functionName('value1', value2)
});
$('anotherElement').each(function () {
    functionName('value1', value2)
});
$('andMoreElement').each(function () {
    functionName('value1', value2)
});

functionName(foo, element){
   //function code here
}

Give them the same class like `$('.thesameClass').each(function() { });` — HTTP, Sep 11 '13 at 09:42
what is `foo` and `otherfoo` - where do they come from? you could put them into a data attribute on the element and then just call one loop passing the data attrbute into `functionName` — Pete, Sep 11 '13 at 09:42
`$('someElement').each(functionName)` would be shorter if the function didn't need any parameters. — nnnnnn, Sep 11 '13 at 09:43
every time functionName is called, there is a unique value for parameters foo and element. so eachtime I call functionName inside each statement, chances are values are different from the others. I wanted to know if theres any way I can shorthand each like you short hand the "if" condition statement — Jetz Ki, Sep 11 '13 at 09:51
You keep changing the question. Note that whenever you change the question, you invalidate the answers people have been kind enough to provide. — T.J. Crowder, Sep 11 '13 at 09:55

T.J. Crowder · Accepted Answer · 2013-09-11T09:59:54.647

As of the latest version of the question, where all three each use the same values, you're best off either using a comma-series of selectors (if those are selectors), or the add function (if they aren't):

$('someElement, anotherElement, andMoreElement').each(function () {
    functionName('value1', value2)
});

functionName(foo, element){
   //function code here
}

or

$('someElement').add('anotherElement').add('andMoreElement').each(function () {
    functionName('value1', value2)
});

functionName(foo, element){
   //function code here
}

Again, it depends on whether 'someElement', 'anotherElement', and such are selectors or elements.

Because you're using each, which calls the function right away, you can also use the curry option below. If you were using click or similar, using the curry option below would change when value2 was evaluated (from when the function is called to when it's curried), which may be desirable or undesirable depending on your use-case.

Answer for an earlier version of the question:

Sadly, you can't use $.proxy or Function#bind for this, as both of them will change the value of this in the call. You can create a curry function that reuses the this it was called with:

var slice = Array.prototype.slice;
function curry(f) {
    var args = slice.call(arguments, 1); // Copy args after `f`
    return function() {
        return f.apply(this, args.concat(slice.call(arguments, 0)));
    };
}

When you pass a function and X number of arguments into curry, it returns a function that, when called, will call the original function with the this value it was called with, the arguments provided to curry, and then any arguments provided to the call.

Then:

$('someElement').each(curry(functionName, 'foo'));
$('anotherElement').each(curry(functionName, 'otherFoo'));
$('andMoreElement').each(curry(functionName, 'otherFoo'));

functionName(foo){
   //function code here
}

Or as the second two uses have the same argument:

$('someElement').each(curry(functionName, 'foo'));
$('anotherElement, andMoreElement').each(curry(functionName, 'otherFoo'));
// Or:
$('anotherElement').add('andMoreElement').each(curry(functionName, 'otherFoo'));

functionName(foo){
   //function code here
}

Hi T.J. as a pro I really admire, I will really appreciate if you will comment if you see a need on my Q&A here: http://stackoverflow.com/q/18749924/601179 — gdoron, Sep 11 '13 at 19:54

score 2 · Answer 2 · answered Sep 11 '13 at 09:42

2

Assuming you want to expand the selection, you might be interested in the .add() function:

$('someElement').add('onotherElement').each(function() { })

will apply your logic to all matches of the someElement as well as onotherElement

answered Sep 11 '13 at 09:42

Nick Andriopoulos

10,313
6
32
56

score 1 · Answer 3 · answered Sep 11 '13 at 09:43

1

 $('#onotherElement','#someElement').each(function () {
        functionName('foo')
    });

answered Sep 11 '13 at 09:43

Shashank

830
1
6
14

2

That doesn't do what you think it does / what the OP wants. That looks for `#onotherElement` **within** `#someElement`. See [the documentation](http://api.jquery.com/jQuery/#jQuery1). – T.J. Crowder Sep 11 '13 at 09:54
every time functionName is called, there is a unique value for parameters foo and element. so eachtime I call functionName inside each statement, chances are values are different from others. I wanted to know if theres any way I can shorthand each like you short hand an "if" condition statement – Jetz Ki Sep 11 '13 at 09:55
no it doesn not look for onteherelement within someelement... u can add how many ever elements u want from any part of the page .each will get called each time.. – Shashank Sep 11 '13 at 10:01
$(document) .ready( function() { $( "#autocomplete" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); $("#but","#cut").click(function(){ $('#autocomplete').autocomplete( "close" );});}); see this sample code #cut and #but are two buttons click function is called if any of the button is clicked – Shashank Sep 11 '13 at 10:03
2

It does look for one within the other. To look for either element you have to pass a single string with the comma _inside_ the string, like this: `$('#onotherElement,#someElement')` – nnnnnn Sep 11 '13 at 10:06
2

@user2256955: *"no it doesn not look for onteherelement within someelement"* Again: Read the documentation. If you don't believe that, maybe an example would help: http://jsbin.com/UwumUBU/1 – T.J. Crowder Sep 11 '13 at 10:29

Andy · Answer 4 · 2013-09-11T09:56:20.180

1

Edit: this will allow you to pass parameters through as per the edit in your question.

var a = 'Function', b = 'works';

$('.a').each(foo.bind(this, a + 'foo', b + 'foo')); // (1)

function foo(a, b, i, el) {
  console.log(a, b, $(el).text());
}

JSfiddle

(1) I added foo to the vars to prove that foo isn't picking up the globals, but the parameters that are passed in.

edited Sep 11 '13 at 09:56

answered Sep 11 '13 at 09:50

Andy

61,948
13
68
95

jQuery 'each' shorthand

4 Answers4