Question

我遇到了这个问题：每个类中有多个span的多个类，并希望提取第一个类的所有数据属性。

<div class="parent_class">
 <span data-year="a_1">Data</span>
 <span data-make="b_1">Data</span>
 <span data-model="c_1">Data</span>
 <span data-motor="d_1">Data</span>
</div>

<div class="parent_class">
  <span data-year="a_2">Data 2</span>
  <span data-make="b_2">Data 2</span>
  <span data-model="c_2">Data 2</span>
  <span data-motor="d_2">Data 2</span>
</div>

我已经做了几次尝试，只是得到了第一个没有问题的数据属性。

var year_response = $('.parent_class:first span').data('year');

   Response:
   year_response = a1;

但是当我尝试使用make和其他数据属性时，我得到了未定义的

Actual:
var make_response = $('.parent_class:first span').data('make');

**Response: 
make_response = undefined;**

Desire:
var make_response = $('.parent_class:first span').data('make');

**Response: 
make_response = b_1;**

Answer 1

如何只将对象的所有数据属性作为对象获取并将它们映射到数组：

var data = $.map($('.parent_class:first span'), function(el) {
    return $(el).data();
});

FIDDLE

或对象，如果所有数据属性都不同：

var data = {};

$.each($('.parent_class:first span'), function(i, el) {
    $.each($(el).data(), function(k,v) {data[k] = v});
});

FIDDLE

Answer 2

你告诉它获得第一个跨度，但你想要第二个跨度（带有make的那个）。如何使用make data属性获取第一个？

console.log($('.parent_class > span[data-make]:first').data('make'));

您还可以使用第n个子选择器选择第n个元素：

console.log($('.parent_class > span:nth-child(2)').data('make'));

获取多个子项中的数据属性

2 个答案: