Получение значений атрибутов данных для элементов коллекции jQuery


Это работает для первого матча:

 var attributeValue = $({selector}).data("myAttribute");

Но если я хочу получить значения для всех совпадений селектора элементов, я делаю следующее:

var attributes = [];
$.each($({selector})), function(k,v) { attributes.push($(v).data("myAttribute")); });

Это кажется глупым. Есть ли более простой способ получить данные для всех элементов?

2 4

2 ответа:

Я не думаю, что есть встроенный способ сделать массив, как вы хотите. Но вы, конечно, можете немного упростить код с помощью $().map():

var attributes = $({selector}).map( function( i, element ) {
    return $(element).data( 'myAttribute' );
});

Или если это что-то, что может быть использовано в нескольких местах, вы можете сделать его плагином:

$.fn.dataArray = function( name ) {
    return this.map( function( i, element ) {
        return $(element).data( name );
    });
};

И вызовите его с помощью этого очень простого кода:

var attributes = $({selector}).dataArray( 'myAttribute' );

Вдохновленный ответом Майкла гири выше, я пришел к аналогичному решению.

Это для всех, кто хочет получить атрибуты данных и создать разметку с этими атрибутами.

фон: я хотел получить атрибуты данных из элемента и создать разметку html на лету для всех элементов, которые находятся в родительском элементе, используя эти атрибуты данных в той же динамической разметке. Вот к чему я пришел, прочитав этот пост. Это было ... для временной шкалы событий.

$({selector}).map(function() {
        var foo = $(this).data('foo');
        var bar = $(this).data('bar');
        $({anotherSelector}).append('<li><a href="#0" data-foo="'+foo+'">'+bar+'</a></li>');
});