在多个新创建的div上使用setInterval

Question

I want to build a small site where I can show multible clocs for different time zones. But I encounterd a problem with the setInterval function.

Here is my code:

function addClock () {
  $("#container").append('<div class="dclock"></div>');
  setInterval(function () {
    var now = new Date();
    var h = now.getHours();
    var min = now.getMinutes();
    var s = now.getSeconds();

    $(".dclock:last").html(h + ":" + ( min < 10 ? "0" : "" ) + min + ":" + ( s < 10 ? "0" : "" ) + s);
  }, 1000);
}

I have a button that calls the addClock function everytime it is clicked. Adding a new clock works fine but if I add a second clock the first one stoppes working.

Answer 1

Because you use a last selector so they select the same element. reference the element you created instead of using a selector to select it.

function addClock () {
  var div = $("<div class="dclock"></div>"); //new div
  $("#container").append(div);  //add the new div
  setInterval(function () {
    var now = new Date();
    var h = now.getHours();
    var min = now.getMinutes();
    var s = now.getSeconds();

    div.html(h + ":" + ( min < 10 ? "0" : "" ) + min + ":" + ( s < 10 ? "0" : "" ) + s);  //update the html of the div
  }, 1000);
}