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

Question

如何data-val才能通过class不使用而获得所有值id？我只能得到第一个.我认为这可以通过使用循环来完成,但我不太确定.

/* 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>

使用jQuery来获取带有.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>