时刻.js将当前日期应用于附加的项目

Question

当appended时，我将如何获取current date并将其归因于.new-li.item的data-date？我想在创建新.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，则可以像$('.new-li .items').length一样获取.new-li中的items长度，并将其作为id附加，就像我对数据属性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>