Question

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

Answer 2

如果您愿意使用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");
});

如何将具有多个标签的多个<span>的所有数据都收集到一个数组中？</span>

2 个答案: