으로 반복

Question

나는 내가 가진 몇 가지 범위 태그에서 데이터를 선택하기 위해 노력하고있어, 콘솔에 첫 번째 태그 로그, 값이

생성하는 ERB "정의"라고 한 후 스팬 태그 :

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

있습니다 여러 XY가 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를이다 수행하는 방법 그거.

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

당신이 배열의 각 범위는 X의 COORD 또는 하나를 가지고

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