jquery - 遍历来自 span 标签的数据

Question

我正在尝试从我拥有的几个跨度标签中选择数据，第一个标签记录在控制台中，但之后的值是“未定义”

生成 span 标签的 erb：

<%= image.connections.each do |conn| %>
    <span class="connection" data-pos-x="<%= conn.pos_x %>"></span>
    <span class="connection" data-pos-y="<%= conn.pos_y %>"></span>
<% end %>

我的 jQuery 是：

console.log($("span").attr('data-pos-x'));
console.log($("span").attr('data-pos-y'));

erb 生成了多个 xy 坐标，所以我需要一种方法来遍历所有坐标，但我不知道该怎么做。

Answer 1

$("span.connection").each(function() {
    var xpos = $(this).data('pos-x');
    var ypos = $(this).data('pos-y');
    if (xpos !== undefined) {
        console.log("X: "+xpos);
    }
    if (ypos !== undefined) {
        console.log("Y: "+ypos);
    }
});

Answer 2

将您的代码包含在DOM Ready event handler然后迭代然后使用$.each

$(function() {

   $('span.connection').each(function() {
      // cache the current span
      var $this = $(this),
          xCord = $this.data('pos-x') !== undefined ? $this.data('pos-x') : '--',
          yCord = $this.data('pos-y') !== undefined ? $this.data('pos-y') : '--',

      console.log('X-cord : ' + xCord + ' :: ' + 'Y-cord : ' + yCord)

   });

});

-

$("span").attr('data-pos-x')也有效.. 但使用数据方法检索自定义属性是一种更好的做法。

Answer 3

如果您只想使用元素进行迭代，您可以

$(".connection").each(function(){
    var data = $(this).data();
    console.log(data);
});

如果您需要数组中的数据

var dataPoints = $.map($(".connection"), function(index, element){
    var data = $(element).data();
    console.log(data);
    return data;
});