Moment.js 文本格式和类答案

【问题标题】：Moment.js text formatting and classesMoment.js 文本格式和类
【发布时间】：2012-05-31 04:27:51
【问题描述】：

第一次发帖。所以我必须在一个看起来像这样的元素中格式化一些文本

<div class="entry-time">
  2012-05-30T20:11:06+00:00 
</div>

我正在尝试使用moment.js 将其格式化为更具可读性的内容。我只能使用 javascript 从前端执行此操作。我写了一个看起来像这样的函数。

$(document).ready(function() {
    function formatDate(date) {
        formattedDate = date.text();
        var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");
        $(date).html( d.format("dddd, MMMM Do YYYY, h:mm:ss a"));
    };

    formatDate($('.entry-date'));
});

这在只有一个元素时有效，但当有多个元素时，它会将所有内容格式化为一个日期。我知道这与 jQuery 拉入一组元素有关，但我不知道如何使用 entry-date 类对每个元素执行我所做的操作。

有人可以帮忙吗？提前谢谢你。

【问题讨论】：

标签： javascript jquery momentjs

【解决方案1】：

问题的核心在于 jQuery .text() 方法获取“匹配元素集中每个元素的组合文本内容，包括它们的后代”(api.jquery.com/text)，而不是迭代你想要的元素。

这样的事情应该可以工作，将一个函数传递给 jQuery .html() setter 方法：

$(".entry-date").html(function(index, value) {
    return moment(value, "YYYY-MM-DDTHH:mm:ss").format("dddd, MMMM Do YYYY, h:mm:ss a");
});

【讨论】：

【解决方案2】：

您需要使用 jquery 的 .each 方法遍历每个匹配项：

$(date).each(function(){  Format date here  });

这会进入您现有的函数 formatDate。

【讨论】：

【解决方案3】：

你会想要遍历传递给函数的元素。这可以通过 jQuery 中的 $.each() 来完成。这是一个简单的例子：

http://jsfiddle.net/n1ck/QQYq2/1/

$(function(){
    function formatDate(dates) {
        dates.each(function(){
            //get date
            formattedDate = $(this).text();

            //format it
            var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");

            //replace it
            $(this).html(d.format("dddd, MMMM Do YYYY, h:mm:ss a"));
        });
    };

 formatDate($('.entry-time'));
});

【讨论】：

【解决方案4】：

根据您当前的代码，您可以像这样修改formatDate 函数

 $(document).ready(function() {
    function formatDate(date) {
      date.each(function(){
        var formattedDate = $(this).text();
        var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");
        $(this).html( d.format("dddd, MMMM Do YYYY, h:mm:ss a"));

      });
  };

 formatDate($('.entry-time'));
});

而您的实际班级名称是 entry-time，但您像 formatDate($('.entry-date')); 一样调用，因为班级 entry-date 不存在，所以什么也得不到。

Working Fiddle

【讨论】：

【解决方案5】：

您必须使用 each 因为您的选择器是一个 类（因为您使用了 '.'） 也可以与多个 DOM 一起使用..所以可能您的 jquery 正在返回一个数组，该数组将使用 each 进行遍历。

$('.entry-date').each(function(){
   formatDate($(this).val());//if it is a text box
});

或

$('.entry-date').each(function(){
   formatDate($(this).text());//if it is a label
});

【讨论】：