Question

我有一些HTML表格单元格，其中包含名为data-rawdate的数据属性，其中包含从服务器呈现的完整（且看起来丑陋）的日期时间值。使用jQuery，我想获取原始日期字符串，使用日期库（在本例中为Moment.js）对其进行格式化，并将其设置为<td>的文本。

这是简化版along with a demo。

HTML：

<table>
  <tr>
    <td data-rawdate="1/6/2016 9:39:29 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
  <tr>
    <td data-rawdate="1/6/2016 9:58:31 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
  <tr>
    <td data-rawdate="1/6/2016 10:01:17 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
</table>

JavaScript的：

$(document).ready(function() {

  $(".dateField").text(
    moment($(this).data("rawdate"), "M-D-YYYY h:m:s a")
        .format("M/D/YYYY")
  );

  //$(".dateField").text($(this).data("rawdate"));
});

起初我认为这是库Moment.js的一个问题，但后来我尝试跳过格式化并简单地将元素的文本设置为$(this).data("rawdate")（参见JS的注释行），甚至那都没有用。我甚至尝试过.attr("data-rawdate")而不是.data("rawdate") - 没有。

有谁知道为什么.text()函数似乎不喜欢.data()函数？感谢。

Answer 1

您必须应用each方法并在each的回调函数中设置文本。见下面的例子：

＆＃13;

$(document).ready(function() {

  $(".dateField").each(function(){
    $(this).text($(this).data("rawdate"));
  });
;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-rawdate="1/6/2016 9:39:29 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
  <tr>
    <td data-rawdate="1/6/2016 9:58:31 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
  <tr>
    <td data-rawdate="1/6/2016 10:01:17 AM" class="dateField"></td>
    <td class="otherField"></td>
  </tr>
</table>

＆＃13;

所以您的代码来自问题：

$(".dateField").text(
    moment($(this).data("rawdate"), "M-D-YYYY h:m:s a")
        .format("M/D/YYYY")
  );

改为：

$(".dateField").each(function(){
    $(this).text($(this).data("rawdate"));
  });

没有moment()，但问题不在其中。主要思想是如何访问和交互元素。

Answer 2

试试这个解决方案

$(document).ready(function() {

  $(".dateField").each(function(){
    $(this).text(moment($(this).data("rawdate"), "M-D-YYYY h:m:s a").format("M/D/YYYY")));
  }
});

使用jQuery .data（）设置元素文本不起作用

2 个答案: