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]

したがって、2 つの部分: 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 に答える