Array creation and printing in jquery

Question

I have a whole bunch of divs that have a class called ofint. Each of them may have additional classes. I'd like to store this information about each div and then print them.

So I'm trying to loop through all divs of class ofint and store the div id and its classes in an array. The idea is that I'll search the array later, but for now I need to create it and make sure it's storing the right information.

I have some idea how to get there, but can't quite do it. How do I complete this and then print the array for double checking purposes?

var myarr = new array;  
$(".ofint").each(function(){
    //store the div id and div classes in the array
    myarr[this.id][classes] = //the list of classes;
});
//print the array here

Answer 1

I think what you're after is something like this:

var myarr = [];
$(".ofint").each(function(){
    myarr.push({ id: this.id, classes: this.className.split(" ") });
});

You could do a print of the output to the body, for example:

$.each(myarr, function() {
  $(document.body).append("ID:<b>"+this.id+"</b> - " + 
                          this.classes.join(', ') + "<br />");
});

You can give it a try here, in this case we're storing an array of objects with 2 properties, the id and an array of classes, the output is just looping through and dumping these 2 properties to the page.

Answer 2

i highly recommend to install firebug, a firefox addon. with that installed and its console activated you then can do console.log(myarr);

within the console you can simply click on that just generated output and analyze the array.

in my opinion ther is no js development without firebug =)

for your approach this should work fine:

$('.ofint').each(function() {
   console.log($(this).attr("class"));
});

or

$('.ofint').each(function() {
    $("body").append($(this).attr("class")+"<br />");
});

if you just want to put out to the body

but you also can just analyze the manipulated html via firebug aswell.

Answer 3

As I have answered before in SO, if you are using Mozilla Firefox, alert(myarr.toSource()) should be sufficient for simple debugging purpose. You can also do $('#debugconsole').text(myarr.toSource()) if you already have a div for printing debug values.

Otherwise consider installing Firebug as it comes with many more debugging facilities (like tweaking your HTML elements on the spot to see the changes)

Answer 4

Nick Craver has already given you a solution, but I'm just posting this to point out some errors in your original code:

1. JavaScript is case-sensitive: it's Array, not array. The shorthand notation [] is also equivalent.
2. You're trying to use myarr as a two-dimensional array, i.e. myarr[this.id][classes]: first, you need to initialize the inner array just like the outer one, and second, classes should be a string because you want to store it under that exact name.

So your original code should look something like this:

var myarr = [];
// OR
var myarr = new Array();

$('.ofint').each(function() {
  myarr[this.id] = []; // creating the inner array here

  myarr[this.id]['classes'] = /* list of classes */;
  // OR
  myarr[this.id].classes = /* list of classes */;
});