jquery - Retrieve data attribute values for jQuery collection's elements

Question

This works for the first match:

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

But if I want to get values for all elements selector matches, I do the following:

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

This feels stupid. Is there simpler way to get the data for all the elements?

Answer 1

我认为没有一种内置方法可以制作您想要的数组。但是您当然可以使用以下方法稍微简化代码$().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' );

Answer 2

受上面 Michael Geary 回答的启发，我想出了一个类似的解决方案。

这适用于任何想要检索数据属性并使用这些属性创建标记的人。

背景：我想从一个元素中检索数据属性，并在同一动态标记中使用这些数据属性为父级中的尽可能多的元素动态创建 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>');
});