jQuery는 첫 번째 값을 가져 와서 모두를 나타냅니다.

Question

jQuery를 사용하여 타임 스탬프를 시간으로 변환합니다. 완벽하게 작동하지만 내 페이지에 너무 많은 타임 스탬프가있는 경우이 코드는 첫 번째 타임 스탬프 만 사용하고 모든 타임 스탬프에서 첫 번째 시간을 표시합니다.

jQuery(document).ready(function() { 
    var time = $('.timestamp').attr('datetime'); 
    var time2 = format_date(time); 
    $('.timestamp').html(time2); 
}); 

<abbr class="timestamp" datetime="1370993104">0 seconds ago</abbr> 

<abbr class="timestamp" datetime="1370854140">0 seconds ago</abbr> 

<abbr class="timestamp" datetime="1370627340">0 seconds ago</abbr> 

Answer 1

.html(function(index, oldhtml)) 함수 구문을 사용하면됩니다. 현재 코드

$('.timestamp').html(function(){ 
    return format_date($(this).attr('datetime')); 
    }); 

문제는 당신의 선택 $('.timestamp').html와 함께 당신은 항상 그들 모두에 대해 동일한 값을 설정하고 $('.timestamp').attr('datetime');를 가져 오는 동안 당신은 단지 첫 번째의 값을 얻을 수 있다는 것입니다.

datetime 속성이 유효하지 않으므로 data-*`` attributes, i.e data-datetime을 사용하고 jquery data()을 사용하여 속성 값에 액세스하십시오. 단, 속성 값을 즉시 변경하고 데이터를 사용하여 검색 할 계획이 없다면.

<abbr class="timestamp" data-datetime="1370993104">0 seconds ago</abbr> 

당신은

$('.timestamp').html(function(){ 
     return format_date($(this).data('datetime')); 
    }); 

에 코드를 변경할 수 있습니다

Answer 2

문제는 선택에 의해 반환 된 요소의 모음 불려 갔을 경우 (인수없이 그 방법과 같은 attr(), html(), text(), 등) jQuery의 getter 메소드는,로부터 정보 만 반환 할 것입니다 처음으로 그 세트의 요소, 아니, 당신이 생각하는 것처럼, 배열.

이이 되더라도 배열을 반환하면 jQuery가 자동으로 해당 배열을 반복하여 의도를 추측하지 않습니다. 즉, 셀렉터에 의해 반환 된 요소를 반복하고 개별적으로 업데이트해야합니다. 고맙게도 대부분의 메서드는 기본적으로 익명 함수를 사용하여 반복을 제공합니다. 그래서, 말했다, 당신은 사용할 필요가 :

$('.timestamp').html(function(){ 
    return $(this).attr('datetime'); 
}); 

JS Fiddle demo.

각 요소를 통해 위의 반복, 그리고 (당신이 주어진 요소의 HTML 내용을 다시 필요로하지 않는 것 때문에 정말 text()를 사용해야하지만)을 현재의 datetime 동일하게 HTML을 설정 요소가 있어야합니다.

그래서, 정말, 내가 좋을 것 :

$('.timestamp').text(function(){ 
    return $(this).attr('datetime'); 
}); 

JS Fiddle demo합니다. 오히려 외부 변수를 사용하려는 경우 (당신이 싶어 왜 난 정말이 표시되지 않습니다하지만)

는하지만, 다음과 같은 방법을 사용할 수 있습니다

var times = $('.timestamp').map(function(){ 
    return $(this).attr('datetime'); 
}).get(); 

$('.timestamp').text(function(i){ 
    return times[i]; 
}); 

JS Fiddle demo합니다.

참고 :

• attr().
• get().
• html().
• map().
• text().

Answer 3

attr은 단일 값을 제공합니다. 각 요소의 속성 값을 사용하여 요소를 처리해야하는 경우 요소를 반복해야합니다.

jQuery(document).ready(function() { 
    $('.timestamp').each(function(){ 
     var time = $(this).attr('datetime'); 
     var time2 = format_date(time); 
     $(this).html(time2); 
    }); 

});