Using jQuery each() w/ parameter-taking function?

Question

I have a bunch of divs of classname foo within a div of classname fooContainer (these foo divs have been dynamically added to fooContainer).

I have a function operateOnFoo(fooObjectToBeOperatedOn) that operates on a single foo div (that is passed into operateOnFoo as a parameter).

I would like to use the jQuery each() feature to run the operateOnFoo function on all/each of the divs of classname foo within fooContainer. I have tried using calls like:

operateOnFoo( $("#fooContainter").each( ".foo" ) );

and

$("#fooContainter").each( operateOnFoo( foo ) );

and

$("#fooContainer").find(".foo").each( operateOnFoo( ".foo" ) );

but I just can't get it to work. How do I proceed?

I'm a little new to web developing, teaching myself as I go along, so I apologize if this question is overly basic - but I couldn't seem to get it working using other similar Stack Exchange posts as I have been able to do with most of my other issues.

Thanks!

@Bergi - operateOnFoo wants the element as the first argument which isn't how .each() calls its callback. — jfriend00
– jfriend00, Commented Jul 3, 2014 at 2:27
@jfriend00: Oh, right, I always forget that jQuery each is broken. — Bergi
– Bergi, Commented Jul 3, 2014 at 2:31
use $("#fooContainer .foo").toArray().map( operateOnFoo ); for such arity. — dandavis
– dandavis, Commented Jul 3, 2014 at 2:42

jfriend00 · Accepted Answer · 2014-07-03 02:26:54Z

1

The .each() callback is what it is and you can't change the number of arguments to it or the order in which they appear. So, because your operateOnFoo() function wants different arguments, you can't have .each() call it directly as it is. You can work around it though like this with a stub function that makes the arguments work like you want:

$("#fooContainer .foo").each(function(index, element) {
    operateOnFoo(element);
});

Also, the single selector "#fooContainer .foo" will select all items with class="foo" that are contained within the object with id=fooContainer.

If you can change operateOnFoo() to accept the exact two arguments that .each() uses (even if you ignore the first argument), so it was declared like this:

function operateOnFoo(index, element) {...}

then you would be able to just do:

$("#fooContainer .foo").each(operateOnFoo);

edited Jul 3, 2014 at 2:26

answered Jul 3, 2014 at 2:21

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hereblur · Accepted Answer · 2014-07-03 02:22:16Z

0

each require a function call back ,so give it a function.

$("#fooContainer").find(".foo").each( function(k, div){ operateOnFoo(div) } );

answered Jul 3, 2014 at 2:22

Hereblur

2,1841 gold badge19 silver badges22 bronze badges

2 Comments

jfriend00 Over a year ago

You missed the part in the question where operateOnFoo() wants the element passed as the first argument to it. As you have it, the .each index will be passed as the first argument to operateOnFoo().

Hereblur Over a year ago

Arh, yes confused with angular which first argument is value. edited

Khurram Hassan · Accepted Answer · 2014-07-03 02:23:55Z

0

Considering fooContainer to be a class and not the ID of the container. You can use it like so:

$(".fooContainer .foo").each(function(index, element){
    operateOnFoo(element);
});

answered Jul 3, 2014 at 2:23

Khurram Hassan

1,5541 gold badge13 silver badges21 bronze badges

4 Comments

jfriend00 Over a year ago

Why did you change fooContainer into a class when the OP specifies it as an id?

Khurram Hassan Over a year ago

Who says fooContainer is an id? It is clearly mentioned in the question as "div of classname fooContainer"

jfriend00 Over a year ago

The OP is using "#fooContainter" in three places which leads one to believe they are using an id..., but they don't show their HTML so it isn't 100% clear, I guess.

Khurram Hassan Over a year ago

@jfriend00 maybe you are correct but as the OP said that he/she is new in web development, so I guessed that his syntax would be wrong.

feijones · Accepted Answer · 2014-07-03 02:26:02Z

0

Try this:

$("#fooContainer .foo").each(function(index, element){

     //Your code goes here...
     alert("Foo index: " + index + "\nContent: " + element);

});

answered Jul 3, 2014 at 2:26

feijones

636 bronze badges

Comments

Antony Francis · Accepted Answer · 2014-07-03 02:41:41Z

0

Try this $(".fooContainter .foo").each(function (i, foo) { operateOnFoo( foo )}; );

The $(".fooContainter .foo") will select all the elements with class foo under fooContainer

edited Jul 3, 2014 at 2:41

answered Jul 3, 2014 at 2:30

Antony Francis

3041 silver badge7 bronze badges

2 Comments

Bergi Over a year ago

Where does that foo variable come from?

Antony Francis Over a year ago

I updated the answer to include the index and element.

Collectives™ on Stack Overflow

Using jQuery each() w/ parameter-taking function?

5 Answers 5

Comments

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related