Захватить все значения из атрибута и нажать на массив

Question

У меня есть контейнер div с атрибутом под названием «Местоположение». В этом месте находится выбор стран, разделенных полутень. Я хотел бы захватить каждое из этих значений и вставить их в массив как отдельные элементы, а не одну длинную строку с точкой с запятой.

<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 Data Attribute.

JS:

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

DEMO.

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