Question

On document ready, I am trying to create an object for all my div(s) in a class and assigned them based on the div’s attribute ‘id’. Here are my codes which doesn’t work, I can’t figure out.

<div class="supercolor" >                       
   <div class="colordiv" id="#111111" style="background-color:#111111;">&nbsp;</div>
   <div class="colordiv" id="#222222" style="background-color:#222222;" >&nbsp;</div>                
   <div class="colordiv" id="#333333" style="background-color:#333333;">&nbsp;</div>
</div>

And in my script section.

$(document).ready(function() {

   $('div.supercolor > div').each(function() {
      var color_object = { $(this).attr('id') : false }
   });
});

Thank you

Answer 1

$(function() {

    var divObjects = $("div.supercolor > div").map(function(val) {
        return new DivObject(this.id);
    }).get();

});

function DivObject(id) {
    this.id = id; 
    ...
}

This will take all your <div>‘s and map them to div objects. You can pass in data from your individual <div> like the id and pass it to the constructor.

You have to call .get() to get out an array.

[Edit]

var testDiv = $.grep(divObjects, function(val) {
    val.id === "test"
})[0];

This code snippet may look more familiar though

var testDiv;
for (var i = 0, ii = divObjects.length; i < ii; i++) {
    var div = divObjects[i];
    if (div.id === "test") {
        testDiv = div;
        break;
    }
}