iterate through data from span tags

Question

I'm trying to select the data from a few span tags I have, the first tag logs in the console, but after that the value is "undefined"

The erb that generates the span tag:

<%= 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 %>

And my jQuery is:

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

There are multiple x-y coordinates generated from the erb, so I need a way to iterate through all the coordinates but I'm not sure how to do that.

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