Javascript 如何在jquery中构建HTML元素及其属性的数组？

我试图在jquery中构建一个数组数组来存储数据，并在以后的代码中使用它们。 我希望有这样的东西：

array[html_node][attribute] = attribute value

基于这种类型的DOM：

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

...
...

---

你能帮我弄清楚这一点吗？

尽管我同意前面的评论（当DOM是一个很好的替代品时，为什么要创建一个存储数据数组呢？），但我相信你所追求的是：

var arr = [];

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

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

});

或者，您可能希望将

节点

作为一个类，其中将有多个

节点

：

var arr = [];

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

  arr.push([]);

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

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

  });
});

或者，如果您希望存储对节点的引用（仅使用数组很困难，因为您需要在其中的某个位置使用密钥）：

---

（引用节点的id，以免阻塞

JSON.stringify

部分。

Javascript中隐藏的宝藏之一，我认为大多数人都忽略了数据结构的使用。特别是结构的使用

对于您正在尝试做的事情，实际上不可能按照您想要的方式进行布局

数组[html_节点][属性]=属性值

原因是，您必须为

html\u节点

分配数字，因此您必须硬编码这些节点，以便以您想要的方式访问它们，或者创建一些复杂的算法来检索特定节点的值

我在这里看到的另一个问题是，可能存在重复的html节点。这意味着，可以有多个

html\u节点
值
'DIV'
，但它们具有不同的属性数据。在任何情况下，
数组[DIV]的数组中只能有一个对象
因此，还需要某种方式来区分每个节点


您的解决方案：

Javascript结构
它们具有超级灵活和易于访问的能力

首先-您需要创建一个
结构工厂
来初始化所有内容。如果您不完全理解工厂，请不要担心，您所需要做的只是复制和粘贴Javascript代码。（但是，如果您能掌握这个概念，这会对您有额外的帮助）

第三个-将元素添加到结构中

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

第四个-从结构中获取元素，这对于循环来说非常简单

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
    }
}

for（变量i=0；i

这就是如何使用structs创建一个简单的数据结构来存储所需的所有信息。
您是否试图将DOM中的每个节点存储在一个数组中？您到底想在这里实现什么？您打算用它做什么？jQuery已经可以为您搜索和收集整个DOM中的属性数据。甚至在ol'js中，使用
getElement…
函数可以完成相当多的工作。您已经获得了DOM。为什么要复制它？您能告诉我们您希望数组值是什么样子吗？即
array[a][data]=123
？或
array[downloading][data]=123
？注意：这只是一个数据数组-并没有引用哪个元素实际持有该数据。@Alnitak非常正确，但OP从未说过他想引用该元素；他只是说他想稍后使用该元素的数据。（我知道，或许OP表达了自己的错误，但到目前为止，这回答了问题）@chris-l我不同意-OP清楚地显示（尽管不正确）维护元素和属性的2D数组的意图。stringify在这种情况下有用吗？@PseudoNym01不幸的是，这不是因为节点引用可能会将其发送到loopy。这没有错，但我不会去超越全局可用的对象…@shennan good point，只是为了清晰起见，但我会改变谢谢你指出这一点。
var HTML_Node = makeStruct("node step data");
var array = [];

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

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
    }
}