0

我正在寻找从多个跨度中获取多个跨度标签并将它们粘贴到数组（或 json 对象）中以供以后使用的最佳实践。（甚至不确定是数组还是 json 是要走的路。）

html:

<span class="car" id=c1 data-make="volvo" data-year="2010">Car1<span>
<span class="car" id=c2 data-make="saab" data-year="1998">Car2<span>

js：

var cars = document.getElementsByClassName('car');
for(var i=0; i<cars.length; i++) { 
  <what goes best here?>
}

目前，我为每个 ID、数据和年份创建了 3 个平面数组，但这看起来很混乱。我无法弄清楚如何创建：

    Array(
[0] => Array(
        [id] => c1 
        [make] => volvo
        [year] => 2010
    )
[1] => Array(
        [id] => c2
        [make] => SAAB  
        [year] => 1998    
    )
);

或者一个 json 对象：

jsonString = [
    {
        "id": "c1",
        "make": "volvo",
        "year": "2010",
    },
    {
        "id": "c2",
        "make": "saab",
        "year": "1998", 
    }
];

我对此的需求很简单。我将使用这些信息对 innerHTML 进行一些简单的替换，例如：

document.getElementById(car[id]).innerHTML = car[make]

所以，有两个部分：1）对于这种类型的任务，多维数组或 json 对象会更好吗？2）在我的循环部分中将数据粘贴到该数组或json中的内容是什么？

谢谢 - 我还在学习。

4

2 回答 2

2

您可以遍历每个元素的所有属性并将每个data-属性添加到相应的对象：

var result = [],
    pattern = /^data-/;

// don't access the 'length' property of a live list in each iteration,
// cache it instead
for(var i = 0, l = cars.length; i < l; i++) { 
    var element = cars[i],
        attrs = element.attributes,
        car = {};

    // setting the ID
    car.id = element.id;

    // iterating over all attributes
    for(var j = 0, jl = attrs.length; j < jl; j++) {
        var name = attrs[j].name;
        if(pattern.test(name)) { // if the attribute name starts with 'data-'
            // remove the 'data-' part and add the value to the current object
            car[name.replace(pattern, '')] = attrs[j].value;
        }
    }

    // add the object to the final list
    result.push(car);
}

演示

于 2012-08-08T16:00:05.900 回答
1

如果你愿意使用 jQuery，你可以使用下面的。否则，请使用 Felix 的答案。

您应该使用对象数组，如下所示：

var arr = [];
$("span").each(function(i) {
    arr[i] = {};
    arr[i]["id"] = $(this).attr("id");
    arr[i]["make"] = $(this).data("make");
    arr[i]["year"] = $(this).data("year");
});
于 2012-08-08T15:54:47.637 回答