Create nested arrays on the fly

Question

I am trying to do this to encode this HTML code and get a nested array of these HTML values ​​that I want to capture.

It may look complicated at first but it is a simple question ...

HTML

<div class="configureData">
               <div title="Large">
                  <a href="yellow" title="true" rel="$55.00" name="sku22828"></a>
                  <a href="green" title="true" rel="$55.00" name="sku224438"></a>
                  <a href="Blue" title="true" rel="$55.00" name="sku22222"></a>
                </div>
              <div title="Medium">
                  <a href="yellow" title="true" rel="$55.00" name="sku22828"></a>
                  <a href="green" title="true" rel="$55.00" name="sku224438"></a>
                  <a href="Blue" title="true" rel="$55.00" name="sku22222"></a>
                </div>
             <div title="Small">
                  <a href="yellow" title="true" rel="$55.00" name="sku22828"></a>
                  <a href="green" title="true" rel="$55.00" name="sku224438"></a>
                  <a href="Blue" title="true" rel="$55.00" name="sku22222"></a>
             </div>
   </div>

Javascript

  //This script is just part of a Object containing methods.
parseData:function(dH){
        dH.find(".configureData div").each(function(indA, eleA){
                   colorNSize.tempSizeArray[indA] = [eleA.title,[],[],[]]
                     $(eleZ).find("a").each(function(indB, eleB){
                              colorNSize.tempSizeArray[indA][indB] = eleB.title
              })
            })
        },

I want the final array to look like this.

 [
   ["large", 
      ["yellow", "green", "blue"],
      ["true", "true", "true"],
      ["$55", "$55","$55"]
   ],
   ["Medium", 
      ["yellow", "green", "blue"],
      ["true", "true", "true"],
      ["$55", "$55","$55"]
   ]
 ]
// and so on....

Answer 1

Given your HTML and this jQuery snippet:

var result = [];
$('.configureData div').each(function () {
    var $a = $('a', this);
    result.push([this.title,
            $.map(['href', 'title', 'rel'], function (a) {
                return [$.map($a, function (v) {
                    return $(v).attr(a)
                })];
            })

    ]);
});

You get to resultconfigure the method that you set.

If you have Firebug, just do it console.dir(result)and take a look.

Edit: I updated the script to extract arbitrary attributes into separate sub-arrays

Answer 2

- . ( .)

parseData:function(dH){
  var results = [];
  dH.find(".configureData div").each(function(indA, eleA){
    var div = $(this);
    var result = [div.attr('title'),[],[],[]];
    results[results.length] = result;
    div.find("a").each(function(indB, eleB){ 
      var link = $(this);
      result[1][result[1].length] = link.attr('href');
      result[2][result[2].length] = link.attr('title');
      result[3][result[3].length] = link.attr('rel');
    });
  });
}