從屬性中獲取所有值並推入數組

Question

我有一個div容器，其標題為“ Location”。 在這個位置上是由半冒號分隔的一些國家。 我想抓住這些值中的每一個並將它們作為單獨的項目推入數組，而不是使用半冒號將其作為一個長字符串。

<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 />");
});