如何使用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'));
});