Question

我正在尝试从我拥有的几个span标签中选择数据，第一个标签在控制台中记录，但之后值为“undefined”

生成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生成了多个x-y坐标，所以我需要一种迭代所有坐标的方法，但我不知道该怎么做。

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

迭代span标签中的数据

3 个答案: