moment.js将当前日期应用于附加项目

Question

current date如何获取data-date并将其归属于.new-li .item的{​​{1}} appended？我想在创建新的.item时为当前时间添加时间戳。

$(document).on("click", ".addbtn", function() {
  var $item = $(".item").last();
  var next = $(".new-li").html();
  $("#list").append(next);
  var lastElement = $(".item").last();
  var rowNum = parseInt($item.attr("id").substr(4)) + 1;
  lastElement.attr("id", "item" + rowNum);
});
// Clock
function formatDate() {
  const NOW = new Date();

  $('.date').each(function() {
    const DATE = new Date($(this).data('date'));
    const DIFF = moment(NOW).diff(DATE, 'day');
    const FORMAT = DIFF < 3 ?
      moment(DATE).fromNow() :
      moment(DATE).format('MMM Do YY, h:mm:ss a');
    $(this).text(FORMAT);
  });
}

formatDate()

.new-li {
  display: none
}

#date-item {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
  <div class="new-li" id="item0">
    <div class="item">
      <div class="date" data-date=""></div>
    </div>
  </div>
  <div class="item">
    <div class="date" data-date="May, 27 2018, 12:30:00"></div>
  </div>
  <div class="item">
    <div class="date" data-date="May, 26 2018, 12:30:00"></div>
  </div>
  <div class="add">
    <button type="button" class="addbtn">Add</button>
  </div>
</div>

Answer 1

我不知道你为什么要做.last和.html()等等。

你可以像它一样追加它。

 $(".new-li").append(`<div class="item">
  <div class="date" data-date="${new Date()}"></div>
</div>`)

如果您尝试相应地指定ID，则可以items .new-li内$('.new-li .items').length的长度，如id，并将其作为{{{} 1}}与我对数据属性date的处理方式相同。

$(document).on("click", ".addbtn", function() {
 
   // $(".new-li .item").first().clone().data('date', new Date()).appendTo(".new-li");
    var clonedItem = $(".new-li .item").first().clone()
    $(".date" ,clonedItem).data('date', new Date())
    $(".new-li").append(clonedItem);
    formatDate();
});
// Clock
function formatDate() {
  const NOW = new Date();

  $('.date').each(function() {
    const DATE = new Date($(this).data('date'));
     
    const DIFF = moment(NOW).diff(DATE, 'day');
    const FORMAT = DIFF < 3 ?
      moment(DATE).fromNow() :
      moment(DATE).format('MMM Do YY, h:mm:ss a');
    $(this).text(FORMAT);
  });
}

formatDate()

.new-li {
 
}

#date-item {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
  <div class="new-li" id="item0">
    <div class="item">
      <div class="date" data-date="">SD</div>
    </div>
     
  </div>
  <div class="item">
    <div class="date" data-date="May, 27 2018, 12:30:00"></div>
  </div>
  <div class="item">
    <div class="date" data-date="May, 26 2018, 12:30:00"></div>
  </div>
  <div class="add">
    <button type="button" class="addbtn">Add</button>
  </div>
</div>