如何获取元素列表的数据属性?

时间:2014-06-03 11:41:27

标签: javascript jquery

给出具有data属性的n个html元素:

<div class="tpl" data-points="2"></div>
<div class="tpl" data-points="5"></div>
<div class="tpl" data-points="10"></div>
<div class="tpl" data-points="5"></div>

如何将这些数据点的值转换为单个数组?,因此最终结果如下:

var historic = [ "2", "5", "10", "5"];

编辑:我最终使用了:

$('.tpl').each(
  function (i) { 
       historic[i] = $(this).attr('data-points'); 
  }
); 

6 个答案:

答案 0 :(得分:3)

使用.map方法与.get一起检索实际的普通值数组:

var historic = $('.tpl').map(function() {
    return $(this).data('points');
}).get();

DEMO: http://jsfiddle.net/yuvPH/2/

答案 1 :(得分:2)

您可以使用.map()

var data = $('div.tpl').map(function() {
  return $(this).data('points');
}).get();

Here's a fiddle

答案 2 :(得分:1)

使用此

$(document).ready(function(){
   $('.tpl').each(function(index){
        var data = $(this).attr('data-points');
        historic[index] = data;
        alert(data);
    });

});

工作JSFiddle

答案 3 :(得分:1)

var historic=[ "0", "0", "0", "0"];
console.log("Initial: "+ JSON.stringify(historic));

i=0;
$(".tpl").each(function(){
   historic[i++]=$(this).attr('data-points');        
});

console.log("Final: "+ JSON.stringify(historic));

答案 4 :(得分:1)

你可以试试这个,而不是.attr()使用jQuery的.data()方法:

var historic = []; // array declaration

$('.tpl').each(function() { // iteration
    historic.push($(this).data('points')); // storing values in array
});

console.log(historic);

答案 5 :(得分:1)

您可以使用此

var historic=[];
console.log("Initial: "+ JSON.stringify(historic));

$.each($('.tpl'), function(){
    historic.push($(this).data('points'));
});

console.log("Final: "+ JSON.stringify(historic));

小提琴链接:http://jsfiddle.net/yuvPH/6/