javascript - 如何从多个类中获取数据属性值

Question

如何仅使用 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() 函数原帖。

Answer 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>