The Beauty Of The jQuery Each() Method
Posted February 19, 2007 at 4:48 PM
The jQuery library provides a method, Each(), which will loop through each element of the target jQuery object:
Launch code in new window » Download code as text file »
- // Loop over each hottie.
- $( "#girls a.hottie" ).each(
-
- // For each hottie, run this code. The "indIndex" is the
- // loop iteration index on the current element.
- function( intIndex ){
-
- // Bind the onclick event to simply alert the
- // iteration index value.
- $( this ).bind (
- "click",
- function(){
- alert( "Hottie index: " + intIndex );
- }
- );
-
- }
-
- );
While there is nothing revolutionary going on here (although the "Bind" method is freakin' sweet-ass-sweet unto itself), the beauty of the Each() method is that it creates a separate function scope for each loop iteration. For anyone who has tried to do a standard FOR-Loop in which each iteration tries to dynamically set some object value, you probably have run into situation where all values post-loop are the same. This has to do with when the variable is being bound.
By creating a separate function scope for each loop iteration, you basically eliminate all the "unexpected" variable binding behavior. Sweet! It seems every time I step back and look at what jQuery is doing for me, it's simply stripping away more and more headache time.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
jQuery And Ext Partner To Deliver Integrated JavaScript And UI Features
Older Post
Completely Awesome: Whack Your Boss
Reader Comments
Yes indeed, each() rules. If you get excited about this kind of stuff, you may want to take a look at Ruby on Rails if you haven't already done so. You'll get excited about a lot of things. For one, the Ruby language alone has some very powerful features that are quite unique and that allow for very elegant code. I really like ColdFusion, but I think RoR brings a lot to the table and it costs nothing (OK, I know, our time is valuable) to give it a try and see something different. And if you decide to do so, please be sure to let us all know what you thought!
Thomas,
Thanks for the heads up. To date, I have not looked into Ruby on Rails. However, I have heard a lot of good things about it. When I start to look into it, I am sure I will have a lot to say ;)
Great Code.
Thanks
exactly what i was looking for. this should be a jquery tutorial. thanks.
I like it, because of possiblity to work with associative arrays - it's really powerful!
Double thanks!
First - for Each(), another one - for $(this), both helped me a lot!
Wow. Thank you. I'm fairly new to js/jquery and this really helps me with logically thinking/looking at what I need. Plus it really helps me in a current project.
@Goody,
I think you are really gonna love jQuery. It rocks and will make Javascript development much easier!
Oh my, you just saved me what I'm sure would have been a few more hours of searching. The each() function is great but I couldn't find any documentation anywhere regarding getting an index from it until here. So thank you. I like jQuery but IE doesn't play nice.
Thanks for assuming that I don't exist
@A Geek Girl,
I am not sure what you are referring to?
hey
I want to use each() to manipulate all the checkboxes that match.
my head and the wall are both bloody now, i seem to need to use this.checked i.o. $(this)
typeof($(this)) yields 'object object'
anyone care to enlighten me?
$('.myclass').each(
function ( intindex ){
this.checked =chkbox.checked ;
}
);
does work. (thanks alot for that btw). Just trying to understand why it works, lol.
how does my function know what this is? i have lots of user myths building up in my head....
thanks again
@greg,
When jQuery executes the function that you pass to the each() method, it executes it in the context of given object such that "this" is explicitly pointed to the given object. This is what the call() and apply() methods do in Javascript.
Most likely, they do something like this:
for (i = 0 ; i < this.size() ; i++){
. . . . yourCallback.call( this[ i ], i, this[ i ] );
}
The first argument of the call() method is the this/context of the executing function (yourCallback). Any subsequent arguments (i, this[ i ]) are the actual arguments passed to the method.
Thanks for this.
You're a Funkin Guy... Everythin I search in google I get you blog... Thanks Ben!
@Roberto,
Ha ha, thanks man - just glad that I'm putting some good stuff out tehre.
This is some real good stuff right here. You got to love Jquery
Hey Ben how are you?
very good stuff here, it helped to much...
Nice photos too...
Thanks
There is some functionality mistakes in this girl.hottie example.
plz replace alert with f***.
Thanks.
@ABCD
That would require that us programmers actually talk to girls, which (*adjusts glasses*) is simply ridiculous.
In seriousness, thanks for the write-up, Ben.
@George, @EFGH,
No problem guys, glad to help.
Hey Ben,
Good lookin' blog for a developer :P
Relating to each(), have you got any tips on not getting this outputting a 'continue reading' link for EVERY <p>, but the whole bunch of <p>'s in the post?
Example here: http://test.ldexterldesign.co.uk/?page_id=9 (disable CSS and you'll see what I mean: http://twitpic.com/gsxsk)
Thanks,
L
@Lewis,
I think the problem is that you are calling each() on your P tags. What you want to do is get the collection of P tag and then get the text() on the entire set.
var text = $( ".... p" ).text();
This will return the text aggregation of all the paragraphs found in the set. This way, you don't have to loop over the 2 paragraphs, which is why you are getting two read more links.
Wow! now i understand "each()"!! i've had read a lot about it, but using "common names"....but it was hard to understand.
With this example: "girls.hottie", was so really easy to understand hehehehe
thanks!
@A GEEK GIRL: hehehe
@ArthasMX,
Excellent - glad I could explain this in a way that finally made sense.
