CODEWITHSUNDEEP
javascriptjqueryarrays
zoum26
zoum26

Reputation: 124

How to build an array of HTML elements and their attributes in jquery?

I'm trying to build an array of array in jquery to store data and use them later in my code. I'm looking to have something like this:

array[html_node][attribute] = attribute value

based on this type of DOM:

<div id= node>
  <a step= "downloading" data="123">
    ...
  </a>
  <a step= "waiting" data="122">
    ...
  </a>
</div>

can you help me figure this out?

Upvotes: 0

Views: 12949

Answers (2)

Adjit
Adjit

Reputation: 10305

One of the hidden gems in Javascript which I think fades most people are the use of data structures. In particular the use of structs

For what you are trying to do, it is virtually impossible to have the layout like you want it

array[html_node][attribute] = attribute value

The reason being, you would have to assign numbers to your html_node's so you would either have to hardcode those in, in order to access them the way you want to, or create some complicated algorithm to retrieve the value of that specific node.

Another issue I am seeing here, is that there can be duplicate html nodes. Meaning, you can have multiple html_node values of 'DIV' but they have different attribute data. In any event, there can be only one object in the array for array[DIV] so there will also need to be some sort of way to distinguish between each node.

Your solution :

Javascript Structs

These have the ability to be super flexible as well as easily accessible.

First - You will need to make a struct factory to initialize everything. Don't worry if you don't completely understand the factory, all you need to do is copy and paste the Javascript code. (However, it is additionally helpful if you can grasp the concept)

function makeStruct(names) {
  var names = names.split(' ');
  var count = names.length;
  function constructor() {
    for (var i = 0; i < count; i++) {
      this[names[i]] = arguments[i];
    }
  }
  return constructor;
}

Second - Create your struct and initialize array

var HTML_Node = makeStruct("node step data");
var array = [];

Third - Add elements to your struct

$('#node').children().each(function(){
    array.push(new HTML_Node(this.nodeName, $(this).attr('step'), $(this).attr('data')));
});

Fourth - Get elements from your struct, which is real simple with a loop.

for(var i = 0; i < array.length; i++){
//All of these if statements will be referencing node / step / data as set up in step 2

    if(array[i].node == 'DIV'){
        //if the node is a DIV element do something
    }

    if(array[i].step == 'waiting'){
        //if the node's step is waiting do something
    }

    if(array[i].data == '123'){
        //if the node's data is 123 do something
    }
}

And that is how you can use structs to create a simple data structure to store all of the information needed.

Upvotes: 0

shennan
shennan

Reputation: 11656

Although I agree with the previous comments (why create an array of stored data when the DOM is a perfectly good substitute?), here is something along-the-lines of what I believe you're after:

var arr = [];

$('#node a').each(function(){

  arr.push( $(this).attr('data') );

});

Or perhaps you are wanting the node as a class, where there will be multiple nodes:

var arr = [];

$('.node').each(function(i){

  arr.push([]);

  $(this).children('a').each(function(){

    arr[i].push( $(this).attr('data') );

  });
});

Or if you are wanting to store a reference to the node (which is difficult using just arrays as you'll need a key in there somewhere):

var arr = [];

$('.node').each(function(i){

  arr.push({ node:this, data:[] });

  $(this).children('a').each(function(){

    arr[i].data.push( $(this).attr('data') );

  });
});

Here's a fiddle (with references to the id of the node so-as not to choke the JSON.stringify part.

Upvotes: 1

Related Questions