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'));
});

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

5 个答案: