jQuery를 사용하여 초당 HTML 요소의 값을 줄일 수 있습니까?

Question

는 여기에 지금까지 가지고 무엇 : 이것은 잘 작동하지만 내가 시작시 sec의 가치와 내 페이지에있는 모든 카운트 다운 요소를 설정해야하기 때문에 문제가 발생

var timer = setInterval(function() { 
    $(".auctiondiv .auctiondivleftcontainer .countdown").text(sec--); 
}, 1000); 

같은 값을가집니다. 따라서 값을 저장하고 줄이기보다는 값을 저장하는 대신 자바 스크립트에서 값을 저장하지 않고 값을 줄이고 값을 줄이는 것이 가장 좋습니다.

.countdown 요소 (<p> 태그) 내부의 텍스트를 가져 와서 그 중 하나를 빼서 동일한 <p> 요소에 다시 할당하려면 어떻게해야합니까? 내가 혼란스럽게 생각하는 것은 내 페이지에 많은 .countdown 요소가 있다는 것입니다.

또한 제로에 도달하면 .countdown 값을 확인해야하므로 할 수 있습니다. 말하기에 조건적인 것. 나는 그것에 .parent()을 사용할 수 있다고 상상하지만, 우리는 보게 될 것입니다.

어떤 안내?

Answer 1

당신은 요소의 일치 세트를 반복하기 위해 jQuery를 each 방법을 사용할 수 있습니다 : 나는 선택을 변경 한

var timer = setInterval(function() { 
    $(".countdown").each(function() { 
     var newValue = parseInt($(this).text(), 10) - 1; 
     $(this).text(newValue); 
     if(newValue == 0) { 
      //Do something 
     } 
    }); 
}, 1000); 

, 당신은 페이지에 많은 등의 요소를 가지고 있고, 내가 말했기 때문에 단지 .countdown에 원래 셀렉터가 모두 일치하지는 않는다고 가정하겠습니다 만, 필요에 따라 분명히 변경할 수 있습니다.

위의 코드는 working example입니다.

Answer 2

리소스를 저장하려면 두 개 이상 사용하는 요소를 변수에 저장해야합니다.

또한 의 사용은 해당 동작의 차이로 인해 setInterval 이상으로 권장됩니다. 왜 here을 읽을 수 있습니다.

// cache elements to save resources 
var $countdownElements = $(".countdown"); 

function countDown() { 

    $countdownElements.each(function() { 
     var $this = $(this); // again, cache element for later use 
     var newValue = parseInt($this.text(), 10) - 1; 
     $this.text(newValue); 
     if (newValue == 0) { 
      //Do something 
     } 
    }); 

    // call this function again in 1 second 
    setTimeout(countDown, 1000); 
} 

countDown();