javascript - 如何使用jquery获取所有元素的数据属性值？

Question

如何在不使用 $.each 的情况下使用 jquery 获取所有元素的数据属性值？

<li class="myclass" data-optionid="2"></li>
<li class="myclass" data-optionid="15"></li>
<li class="myclass" data-optionid="27"></li>

结果应该是:2, 15, 17

我尝试了 $('.myclass').data('optionid')但结果是 2

提前致谢。

Answer 1

$('.myclass') 将选择具有类 myclass 的所有元素，但是当在其上使用 .data() 时将返回匹配集中第一个元素的数据属性值，从而返回 2。

由于有多个元素具有数据属性，您需要使用 $.each 遍历它们

$('.myclass').each(function() {
    console.log($(this).data('optionid'));
});

$('.myclass').each(function() {
    console.log($(this).data('optionid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li class="myclass" data-optionid="2"></li>
<li class="myclass" data-optionid="15"></li>
<li class="myclass" data-optionid="27"></li>

如果你想得到结果作为数组，使用$.map和 $.get

var data = $('.myclass').map(function() {
    return $(this).data('optionid');
}).get();

var data = $('.myclass').map(function() {
    return $(this).data('optionid');
}).get();
console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li class="myclass" data-optionid="2"></li>
<li class="myclass" data-optionid="15"></li>
<li class="myclass" data-optionid="27"></li>