jquery - map() get() confusion -

i'm going through jquery api , i'm bit confused on map() & get() method. know i'm wrong map() method looks lot .each() statement? except documentation says returns new jquery object.

i've been playing on jsfiddle trying head around it, i'm not quite there. here jsfiddle link:

also here snippet of code:

$.fn.equalizeheights = function() {     var 2 = $(this).map(function(i, e) {                                 return $(e).height();                             });     console.log(two);     console.log(two.constructor);     console.log(two.get());     console.log(two.get().constructor);     return this.height(math.max.apply(this,two.get())); } $('input').click(function() {     $('div').equalizeheights(); }); 

i see extending jquery using prototype create function called equalizeheights(). , $(this) represents selector 'div' elements on page. map() call iterates through each of items in array of divs , returns height? i'm confused i'm logging console. 1 object , other array?

could elaborate on map() , get() doing in snippet of code?

thanks in advance.

fundamentals

there 2 different jquery map() functions: .map(), , $.map(). perform similar things, on different collections. you're using first form, following:

1. iterate on jquery object (collection, whatever) on function invoked. in case, that's $(this), whatever .equalizeheights() function invoked on ...which $('div'): <div> elements on page (phew).

2. create array same number of elements object .map() invoked on (all divs on page, remember) n^th element generated invoking provided callback - i'll there in sec - on n^th element in targeted jquery object. in particular case, callback function:

   function(i, e) { return $(e).height(); }

yes, .map() .each(), there key difference:

• .each() performs action on each of elements in collection; return value of callback passed .each() used determine whether or not iteration continues.
• .map() performs action on each of elements in collection, callback's return value used generate element in array-like object returned .map().

are still me?

jquery obects array-like, not arrays! reason call .get() @ end of .map() call turn jquery object true array. elements of array values returned callback.

putting together

this function sets height of every single <div> on page height of tallest <div>. here's how:

$('input').click(function() {   // bind click listener every <input> element     $('div').equalizeheights(); // ...that call equalizeheights() fn                                 //    on <div> elements when fired }); 

so, looking inside of equalizeheights() definition:

$.fn.equalizeheights = function() {     // construct array contains height of every <div> element     var 2 = $(this).map(function(i, e) {                                 return $(e).height();                           });       return this.height(    // set height of element <div> element to...         math.max.apply(    // largest value in...             this,two.get() // array of height values         )     ); // ...and finally, return original jquery object enable chaining } 

but constructor business?

as discovered, yes, 1 object (a jquery object) , other array. that's why need .get() call turn array-like object math.max() can understand.

instead of looking @ constructor property, can use little more jquery figure out you're looking at:

console.log(two.jquery);         // version of jquery, "1.4.4" console.log($.isarray(two));     // plain old js array? false console.log(two.get().jquery);   // undefined! it's array. console.log($.isarray(two.get()));    // true 

even better @ actual objects inside of debugger, rather console.log()-ing them. way, can see entire object graph, properties, etc.

any questions? comment away.