如何从多个类中获取数据属性值答案

【问题标题】：How to get data attribute values from multiple class如何从多个类中获取数据属性值
【发布时间】：2015-04-03 18:05:35
【问题描述】：

如何仅使用class 而不是id 来获取data-val 的所有值？我只能拿到第一个。我认为这可以通过使用循环来完成，但我不太确定。

/* JS */

var dataValue = $('.test').data('val');
$('#result').append('Result: ' + dataValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

不是Using jQuery to get data attribute values with .each() 的重复项，因为我不是要求HOW 使用.each() 我是问使用什么，并且原始帖子中没有each() 功能。

【问题讨论】：

也许你应该从每个元素中获取数据 $( ".test" ).each(function( index ) { console.log( data + ": " + $( this ).data("val ") ); });
Using jQuery to get data attribute values with .each()的可能重复
@Velthune 我认为这不是重复的，因为在我的原始帖子中没有 .each() 函数，我不确定我将使用什么函数。如果我之前知道.each()，那我一开始就不应该问这个问题。
您的问题已经在许多帖子中得到解答。您应该在询问之前进行搜索。
@Velthune 我知道如何搜索。但是，如果您不知道确切的字符串，则很难搜索。不想和有毒的人争论，做你喜欢的事。

标签： javascript jquery html

【解决方案1】：

你需要遍历列表来获得：

不要在每次迭代时修改 DOM，而是将其附加一个字符串/数组，然后将其添加到 dom：

var array = [];
$(".test").each(function() {
    array.push($(this).data("val"));
});
$("#result").append("Results "+array.join(","))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

【讨论】：

不确定我会接受什么。与@Akskay 几乎相同。
我出于性能原因对其进行了修改。 @Akskay 在每次迭代中附加它。我是第一个回答的；）

【解决方案2】：

这个怎么样

/* JS */

 $('.test').each(function(){
 var dataValue = $(this).data('val');
   $('#result').append(dataValue);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

【讨论】：

谢谢，这正是我所需要的。干杯。

【解决方案3】：

不清楚你想要什么结果。计数值或由something 分隔的值？这种情况下将每个值都放入数组中。

var result = [];
$(".test").each(function() {
    result.push($(this).data("val"));
});

$('#result').append('Result: ' + result.join(', '));

【讨论】：