JQuery получить атрибуты

Question

Я ищу способ получить пользовательские атрибуты элемента с помощью jquery.

<span id='element' data-type='foo' data-sort='bar'></span>

Я хочу получить: ["data-type", "data-sort"] в виде массива.

Кто-нибудь знает, как это сделать?

Спасибо.

Answer 1

Вы можете использовать свойство .attributes DOM и выполнить цикл, например:

var arr = document.getElementById('element').attributes, attributes = [];
//or if you're inside a jQuery loop, just use this.attributes
//e.g.: var arr = $("span").get(0).attributes, attributes = [];
for(var i = 0; i < arr.length; i++) {
  if(arr[i].name.indexOf("data-") == 0) //only ones starting with data-
    attributes.push(arr[i].name);
}
alert(attributes); ​//use it for something, result is ["data-type", "data-sort"]

Вы можете увидеть рабочую демонстрацию здесь , кроме захвата элемента, он вообще не специфичен для jQuery, поэтому вы можете легко удалить его полностью, если это необходимо.

Answer 2

Просто для справки для тех, кто использует jQuery, атрибуты, начинающиеся с 'data-', могут быть доступны с помощью функции data():

<span id='element' data-type='foo' data-sort='bar'></span>

var el = $('#element');
return [el.data('type'), el.data('sort')];

Некоторые браузеры начинают хранить их более продвинутыми способами (локальное хранилище данных?), А другие нет, но, похоже, работает довольно хорошо. Обратите внимание, что валидаторам W3C не нравятся такие атрибуты expando, но я думаю, что есть некоторые предложения, чтобы стандартизировать это, чтобы они действительно проверяли. В прошлый раз, когда я искал лучший способ хранения данных с элементом, используя data-key, как это было одним из победителей среди профессионалов.

Другой способ, которым я столкнулся, чтобы связать данные с элементом, - это вставить тег сценария непосредственно перед или после элемента, придав ему тип, отличный от text/javascript, такой как:

<script id="templatedata" type="text/html">
   <span>23</span>
   <span>Alfred</span> <!-- I'm sure you can get more creative than I'm being here -->
</script>

Это не будет отображаться в браузере, и вы все равно можете получить туда HTML через $('#templatedata').html();. Это может иметь свои проблемы, поскольку технически это не правильно, но если для вас важна проверка W3C HTML, это может быть жизнеспособным вариантом.

Answer 3

Вы можете использовать этот код, его очень просто искать. Просто включите jquery больше ничего .. Простой Jquery Filter

Answer 4

просто $('#element').attr('data-type'); и $('#element').attr('data-sort');

извините, ответил перед тем, как прочитать весь вопрос: - / Не думайте, что есть встроенная функциональность, позволяющая получить их как массив, получить первый, получить второй, а затем собрать массив вручную.