如何使用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.

由于有多个元素具有data-attribute,因此您需要使用它们迭代它们 $.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>