jQuery each element

Question

I'm curious why this code is invalid:

$.each( $("p") ).css("color", "green");

While this code works fine:

$.each($("p"), function() { $(this).css("color", "green") });

Is it not possible to chain elements with each?

No, it's not possible like that. Here's an existing SO discussion about this: http://stackoverflow.com/questions/2002394/jquery-animate-each-chaining — davidethell, Jan 25 '12 at 20:08

Rob W · Accepted Answer · 2012-01-25T20:17:21.247

36

Remove the wrapper:

$("p").css("color", "green");

If you want to use $.each, specify a function as a second argument:

$("p").each(function() {
//Or: $.each( $("p"), function() {
   $(this).css("color", "green");
});

The jQuery method automatically returns an instance of the collection, so chaining should still be possible.

Demo: http://jsfiddle.net/pC2Bj/

See also:

jQuery docs - $().each()
jQuery docs - $.each

edited Jan 25 '12 at 20:17

answered Jan 25 '12 at 20:07

Rob W

341,306
83
791
678

3

It should be noted that `$.each` is used for `HTMLCollections` and other native JavaScript collections while the jQuery method `$('.selector').each()` is used for jQuery objects. – Sethen Mar 25 '13 at 16:00

score 9 · Answer 2 · 2012-01-25T20:16:30.700

9

$.each() requires a function as the second argument. You've only passed one argument.

http://api.jquery.com/jquery.each/

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection The object or array to iterate over.

callback(indexInArray, valueOfElement) The function that will be executed on every object.

Yes, it is possible to chain, since $.each returns the collection you're iterating.

$.each($("p"), function() { $(this).css("color", "green") }).addClass('test');

edited Jan 25 '12 at 20:16

answered Jan 25 '12 at 20:08

Could you give an example of chaining each? – Ryre Jan 25 '12 at 20:15
1

@Toast: Updated with an example. – Jan 25 '12 at 20:16
@Toast. I wish you were right, But my answer was wrong. See [this](http://jsfiddle.net/gdoron/qSquu/1/) JSFiddle – gdoron Jan 25 '12 at 20:43

score 1 · Answer 3 · answered Jan 07 '15 at 12:50

1

Note that no version of each is needed to achieve the (most likely) desired effect.

$("p").css("color", "green");

does the job.

answered Jan 07 '15 at 12:50

MaxH

859
10
14

score 1 · Answer 4 · answered Jan 25 '12 at 20:07

$.each requires two parameters, the second being a callback that executes once for each element. If you don't pass the callback parameter, $.each won't work.

Also, $.each returns the object over which it iterates, so chaining doesn't work like it would with methods that return a jQuery object.

jQuery each element

4 Answers4

jQuery.each( collection, callback(indexInArray, valueOfElement) )