Javascript: Put array of objects values to divs

Question

I want to store properties (text length and style) of several divs into an array. Then I want to put the values of the style keys in other divs according to div text length.

$("#blocks .block span").each(function() {
     blockspansizes.push({length: $(this).text().length, style:$(this).attr("style")});              
});//text lengths are all different.


$(".newblocks span").each(function() {
         textlength = (this).text().length
 //if textlength matches one length value from array, get its corresponding style from the same object.
    });

Answer 1

You cant push to array like that and then compare the values. You can do it with key/value pairs:

$("#blocks .block span").each(function() {
   blockspansizes[$(this).text().length]=$(this).attr("style");              
 });//text lengths are all different.


$(".newblocks span").each(function() {
     textlength = (this).text().length;
      //if textlength matches one length value from array, get its corresponding style from  the      same object.
     if(blockspansizes.indexOf(textlength) > -1){
        //do something with blockspansizes[textlength]
     }

});

Answer 2

Thank you for the kind help, vodich. Here's how I managed to make it work:

    blockspansizes = new Array();
$("#blocks .block span").each(function() {
    blockspansizes.push({length: $(this).text().length, style:$(this).attr("style")});               
});

$(".newblock span").each(function() {
    textlength = $(this).text().length;
    result = $.grep(blockspansizes, function(e){ return e.length == textlength; });
    $(this).attr("style", result[0].style);
});