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

Answer 2

请试试这个

 $(".myclass").each(function(){ alert($(this).attr("data-optionid")); }); 

Answer 3

我不确定你是否注意到了这个小错字，但是先关闭了开头的<li>标签。

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

使用jQuery代码，您不必执行$ .each，因为jQuery可以在初始元素选择器中执行此操作。 因此，如果您在选择器上执行.prop以获取data-optionid，那么您将获得该值。

$(".myclass").attr("data-optionid");

关于HTML的灵活性，您可以创建自己的属性以在代码的其他部分中使用。 如果浏览器无法识别它，则会被忽略。

Answer 4

您应该使用$.each或使用$.map作为多个元素

 var arr=[]; $('.myclass').each(function(i,item){ arr.push($(item).data('optionid')); }) alert(arr.toString()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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> 

Answer 5

使用$.each()迭代器函数，并为每个对象访问其选项数据属性。

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