javascript - How to build an array of HTML elements and their attributes in jquery? - Stack Overflow

admin管理员组

文章数量:1434956

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?

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?

• javascript
• jquery
• arrays

Share Improve this question Follow asked Jul 7, 2014 at 19:08 zoum26zoum26 12411 gold badge22 silver badges1212 bronze badges 4

• 1 Are you trying to store every single node from the DOM in an array? What exactly are you trying to achieve here? – hRdCoder Commented Jul 7, 2014 at 19:10
• 1 What are you going to do with this? jQuery already can search and collect attribute data across the DOM for you. Even plain ol' js can do quite a bit of that with the getElement... functions. – Jonathan M Commented Jul 7, 2014 at 19:11
• 2 you've already got the DOM. why duplicate it? – Marc B Commented Jul 7, 2014 at 19:12
• Can you show us what you would like your array values to look like? ie array[a][data] = 123? or array[downloading][data] = 123? – Adjit Commented Jul 7, 2014 at 20:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Although I agree with the previous ments (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.

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 plicated 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 pletely 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.

本文标签： javascriptHow to build an array of HTML elements and their attributes in jqueryStack Overflow