javascript - 属性からすべての値を取得し、配列にプッシュします

Question

「場所」というタイトルの属性を持つ div コンテナーがあります。この場所には、セミコロンで区切られた国が選択されています。これらの値をそれぞれ取得し、セミコロンを含む 1 つの長い文字列ではなく、個別の項目として配列にプッシュしたいと考えています。

<div class="item-container" location="United States; United Kingdom; France"></div>

一旦、整理したいのですが、前半が肝心です。

任意の支援に感謝します。

Answer 1

var element = document.querySelector('.item-container');
var locations = element.getAttribute('location').split('; '); // ["United States", "United Kingdom", "France"]
locations.sort(); // ["France", "United Kingdom", "United States"]

前述のように、名前を変更locationしdata-locationて、その文字列にアクセスするために使用element.dataset.locationできます (IE 10 以降)。

Answer 2

data-カスタム属性にはプレフィックスを使用することをお勧めします。

HTML:

<div class="item-container" data-location="United States; United Kingdom; France"></div>

HTML5 データ属性。

JS:

var div = document.querySelector('[data-location]');
var arr = div.getAttribute('data-location').split(';').sort();
console.log(arr); // [" France", " United Kingdom", "United States"] 

デモ。

Answer 3

jQuery の使用: http://jsfiddle.net/3ma9m/

var str = $('.item-container').attr('location');
var n = str.split(";");

$.each(n, function (key, value) {
    $('.item-container').append(key + ": " + value + "<br />");
});