Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

与Using jQuery to get data attribute values with .each()不重复，因为我没有要求HOW使用.each()我要求使用什么，而且没有each()功能在原帖中。

Answer 1

您需要遍历列表才能获得：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

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

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

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

3 个答案: