如何用moment.js为追加的.new-li .item设置data-date当前日期

要在追加新的.item元素时为其.date节点设置当前日期的data-date属性，你只需要在现有代码的追加逻辑后补充几步即可，具体修改如下：

核心步骤 #

• 定位新添加元素下的.date节点
• 生成与现有data-date格式匹配的当前日期字符串
• 为.date节点设置data-date属性
• 调用日期格式化函数更新显示文本

修改后的完整代码 #

JavaScript部分

$(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); 

    // 新增：为新元素的.date节点设置当前日期
    const newDateNode = lastElement.find('.date');
    // 生成和现有data-date一致格式的当前日期字符串
    const currentDate = moment().format('MMM, DD YYYY, h:mm:ss');
    newDateNode.attr('data-date', currentDate);
    
    // 更新新元素的日期显示文本
    formatDate();
}); 

// Clock function 
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()

CSS部分

.new-li { display: none }
#date-item { display: flex }

HTML部分

<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>

额外优化建议 #

如果页面中.item元素较多，遍历所有.date节点会影响性能，你可以修改formatDate函数，让它支持单独处理单个元素：

// 优化后的formatDate，支持批量或单个元素处理
function formatDate(targetElement) { 
    const NOW = new Date(); 
    const $elements = targetElement ? $(targetElement) : $('.date');
    
    $elements.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(newDateNode);，就能只更新新添加的日期节点，提升效率。

内容的提问来源于stack exchange，提问作者Kyle Underhill