javascript 如何在 jquery 中构建 HTML 元素及其属性的数组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24618024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build an array of HTML elements and their attributes in jquery?
提问by zoum26
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:
我正在尝试在 jquery 中构建一个数组数组来存储数据并稍后在我的代码中使用它们。我希望有这样的东西：
array[html_node][attribute] = attribute value
based on this type of DOM:
基于这种类型的 DOM：
<div id= node>
<a step= "downloading" data="123">
...
</a>
<a step= "waiting" data="122">
...
</a>
</div>
can you help me figure this out?
你能帮我弄清楚吗？
回答by shennan
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:
尽管我同意之前的评论（当 DOM 是一个完美的替代品时，为什么要创建存储数据的数组？），但这里有一些我相信您所追求的内容：
var arr = [];
$('#node a').each(function(){
arr.push( $(this).attr('data') );
});
Or perhaps you are wanting the nodeas a class, where there will be multiple nodes:
或者，您可能希望将其node作为一个类，其中会有多个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 keyin 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.stringifypart.
这是一个小提琴（引用节点的 id 以免阻塞JSON.stringify部件。
回答by Adjit
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
我认为大多数人都会淡化 Javascript 中隐藏的宝石之一是数据结构的使用。特别是结构体的使用
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
数组[html_node][attribute] = 属性值
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.
原因是，您必须为html_node's分配数字，因此您必须对这些数字进行硬编码，以便以您想要的方式访问它们，或者创建一些复杂的算法来检索该特定节点的值。
Another issue I am seeing here, is that there can be duplicate html nodes. Meaning, you can have multiple html_nodevalues 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.
我在这里看到的另一个问题是可能存在重复的 html 节点。意思是，您可以有多个html_node值，'DIV'但它们具有不同的属性数据。无论如何，数组中只能有一个对象，array[DIV]因此还需要某种方式来区分每个节点。
Your solution :
您的解决方案：
Javascript Structs
Javascript 结构体
These have the ability to be super flexible as well as easily accessible.
这些具有超级灵活且易于访问的能力。
First- You will need to make a struct factoryto 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)
首先- 你需要做一个struct factory来初始化一切。如果您不完全了解工厂，请不要担心，您需要做的就是复制并粘贴 Javascript 代码。（但是，如果你能理解这个概念，它也很有帮助）
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.
这就是您可以如何使用结构创建一个简单的数据结构来存储所需的所有信息。
