javascript - 如何将具有多个标签的多个 中的所有数据获取到数组中？

Question

我正在寻找从多个跨度中获取多个跨度标签并将它们粘贴到数组(或 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 中？

谢谢 - 我还在学习。

Answer 1

您可以迭代每个元素的所有属性，并将每个 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);
}

DEMO